From 85ff547eeac42637fb16f0204c05363c6256d612 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Tue, 9 May 2023 12:16:18 +1000
Subject: [PATCH] add loading spinner

---
 pairent_frontend_react/package.json           |  1 +
 .../src/pages/IndexPage/index.jsx             | 37 +++++++++++--------
 pairent_frontend_react/yarn.lock              |  5 +++
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/pairent_frontend_react/package.json b/pairent_frontend_react/package.json
index a84c997..bc7a23b 100644
--- a/pairent_frontend_react/package.json
+++ b/pairent_frontend_react/package.json
@@ -12,6 +12,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.0",
     "react-select": "^5.7.3",
+    "react-spinners": "^0.13.8",
     "styled-components": "^6.0.0-rc.1",
     "swiper": "^9.2.4"
   },
diff --git a/pairent_frontend_react/src/pages/IndexPage/index.jsx b/pairent_frontend_react/src/pages/IndexPage/index.jsx
index 975e2f1..c4c7846 100644
--- a/pairent_frontend_react/src/pages/IndexPage/index.jsx
+++ b/pairent_frontend_react/src/pages/IndexPage/index.jsx
@@ -13,6 +13,7 @@ import 'swiper/css/navigation';
 // swiper customization
 import './swiper.css';
 import ApartamentService from "../../API/ApartamentService";
+import { HashLoader } from 'react-spinners';
 
 
 const SVGIcon = styled(ISVGIcon)`
@@ -27,10 +28,6 @@ const Title = styled.p`
     text-shadow: 0 2px 1px #00000020;
 `;
 
-const HighlightWord = styled.span`
-    color: cornflowerblue;
-`;
-
 const SwiperImage = styled.div`
     background: url(${props => props.src ? props.src : ''});
     background-repeat: no-repeat;
@@ -94,13 +91,7 @@ const SubmitBtn = styled.button`
     background: royalblue;
     padding: 10px;
     border-radius: 8px;
-    color: #f9f9f9;
-    font-weight: 700;
-    float: right;
-
-    &:active {
-        background: #3759bf
-    }
+    color: #f9f9f9;W
 `;
 
 const SearchBarFilter = styled.div`
@@ -166,6 +157,12 @@ const IndexPageRoot = styled.div`
     margin: 50px auto
 `;
 
+const Splash = styled.h3`
+    font-weight: 500;
+    margin: 48px 0;
+    text-align: center;
+`;
+
 const FiltersForm = () => {
 
     const apart_sizes = [
@@ -300,12 +297,14 @@ export default class IndexPage extends React.Component {
             apartments: [],
             pageSize: 10,
             page: 0,
-            data_loaded: false
+            data_loaded: false,
+            load_err: false
         };
 
         ApartamentService.getAll(100).then(data => {
-            globalThis.data = data.data.results;
             this.setState({apartments: data.data.results, data_loaded: true});
+        }).catch(err => {
+            this.setState({data_loaded: true, apartments: [], load_err: err.message});
         });
     }
 
@@ -338,7 +337,7 @@ export default class IndexPage extends React.Component {
 
                 <Title>
                     Выбор квартиры во
-                    <HighlightWord> Владивостоке</HighlightWord>
+                    <span style={{color: '#0066ff'}}> Владивостоке</span>
                 </Title>
 
                 <FiltersForm />
@@ -347,11 +346,19 @@ export default class IndexPage extends React.Component {
                 {
                     !this.state.data_loaded ?
                     <>
-                        <h3 style={{fontWeight: '500', margin: '48px 0', textAlign: 'center'}}>Данные загружаются, подождите немного</h3>
+                        <Splash>Данные загружаются, подождите немного</Splash>
+                        <div style={{margin: '0 auto', width: 'fit-content'}}><HashLoader color='#0077aa' /></div>
+                        
                     </> :
                     null
                 }
 
+                {
+                    this.state.load_err ?
+                    <Splash>Ошибка загрузки данных: <br/> {this.state.load_err}</Splash> :
+                    null
+                }
+
                 <PageButtons>
                     {
                         [...Array(pages)].map((_, i) => {
diff --git a/pairent_frontend_react/yarn.lock b/pairent_frontend_react/yarn.lock
index 18bccd4..31a4435 100644
--- a/pairent_frontend_react/yarn.lock
+++ b/pairent_frontend_react/yarn.lock
@@ -3282,6 +3282,11 @@ react-select@^5.7.3:
     react-transition-group "^4.3.0"
     use-isomorphic-layout-effect "^1.1.2"
 
+react-spinners@^0.13.8:
+  version "0.13.8"
+  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
+  integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
+
 react-transition-group@^4.3.0:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"