add loading to tinder

pairent_frontend_react/src/pages/Tinder/index.jsx

@@ -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>
         )