add loading to tinder
This commit is contained in:
parent
11b0e1fce9
commit
87c7e9c8ed
|
@ -2,6 +2,7 @@ import React from "react";
|
|||
import styled, { keyframes } from 'styled-components';
|
||||
import SVGIcon from "../../components/UI/Icon/SVGIcon";
|
||||
import Pagination from "../../components/UI/Pagination";
|
||||
import { HashLoader } from 'react-spinners';
|
||||
|
||||
const ChatSVG = () => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/></svg>;
|
||||
|
@ -101,7 +102,6 @@ const UserList = styled.div`
|
|||
margin: 32px auto;
|
||||
margin-bottom: 0;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
`;
|
||||
|
||||
|
||||
|
@ -214,25 +214,32 @@ const RightBadge = styled(LeftBadge)`
|
|||
}
|
||||
`;
|
||||
|
||||
class Users extends React.Component {
|
||||
const LoadingText = styled.h2`
|
||||
text-align: center;
|
||||
line-height: 3.5em;
|
||||
margin: 0;
|
||||
padding: 100px 0;
|
||||
|
||||
& span {
|
||||
display: inline;
|
||||
margin: 0px auto
|
||||
}
|
||||
`;
|
||||
|
||||
class UserDisplay extends React.Component {
|
||||
|
||||
/** @type {{ value: import('../../API/User').User[] }} */
|
||||
props;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<UserList>
|
||||
|
||||
<h2 style={{textAlign: 'center', lineHeight: '11pt', marginBottom: 32}}>
|
||||
Выбери соседа
|
||||
<br/>
|
||||
<br/>
|
||||
<span style={{ fontSize: '11pt', fontWeight: 500 }}>
|
||||
Не забывай, с этим человеком<br/>
|
||||
придется жить бок-о-бок!
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div>123
|
||||
{
|
||||
[...Array(11)].map((_, i) => {
|
||||
if (i == 5) return <br/>;
|
||||
|
||||
this.props.value.map(x => {
|
||||
return (
|
||||
<UserCard>
|
||||
<SVGIcon src='/images/icons/user.svg' width='100' height='100' />
|
||||
|
@ -254,9 +261,50 @@ class Users extends React.Component {
|
|||
</ContactButton>
|
||||
|
||||
</UserCard>
|
||||
);
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Users extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: [{}],
|
||||
loading: false
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<UserList>
|
||||
|
||||
<h2 style={{textAlign: 'center', lineHeight: '11pt', marginBottom: 32}}>
|
||||
Выбери соседа
|
||||
<br/>
|
||||
<br/>
|
||||
<span style={{ fontSize: '11pt', fontWeight: 500 }}>
|
||||
Не забывай, с этим человеком<br/>
|
||||
придется жить бок-о-бок!
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{
|
||||
this.state.loading ?
|
||||
<UserDisplay value={this.state.data} /> :
|
||||
<LoadingText>
|
||||
Пожалуйста подождите, идет загрузка данных<br/>
|
||||
<HashLoader color='#0077aa' />
|
||||
</LoadingText>
|
||||
}
|
||||
|
||||
</UserList>
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue