add loading to tinder

This commit is contained in:
b1ek 2023-05-17 04:47:29 +10:00
parent 11b0e1fce9
commit 87c7e9c8ed
Signed by: blek
GPG Key ID: 14546221E3595D0C
1 changed files with 66 additions and 18 deletions

View File

@ -2,6 +2,7 @@ import React from "react";
import styled, { keyframes } from 'styled-components'; import styled, { keyframes } from 'styled-components';
import SVGIcon from "../../components/UI/Icon/SVGIcon"; import SVGIcon from "../../components/UI/Icon/SVGIcon";
import Pagination from "../../components/UI/Pagination"; import Pagination from "../../components/UI/Pagination";
import { HashLoader } from 'react-spinners';
const ChatSVG = () => { 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>; 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: 32px auto;
margin-bottom: 0; margin-bottom: 0;
display: block; 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() { render() {
return ( return (
<UserList> <div>123
<h2 style={{textAlign: 'center', lineHeight: '11pt', marginBottom: 32}}>
Выбери соседа
<br/>
<br/>
<span style={{ fontSize: '11pt', fontWeight: 500 }}>
Не забывай, с этим человеком<br/>
придется жить бок-о-бок!
</span>
</h2>
{ {
[...Array(11)].map((_, i) => { this.props.value.map(x => {
if (i == 5) return <br/>;
return ( return (
<UserCard> <UserCard>
<SVGIcon src='/images/icons/user.svg' width='100' height='100' /> <SVGIcon src='/images/icons/user.svg' width='100' height='100' />
@ -254,9 +261,50 @@ class Users extends React.Component {
</ContactButton> </ContactButton>
</UserCard> </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> </UserList>
) )