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 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>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue