add loading spinner

This commit is contained in:
b1ek 2023-05-09 12:16:18 +10:00
parent 4b55008f16
commit 85ff547eea
Signed by: blek
GPG Key ID: 14546221E3595D0C
3 changed files with 28 additions and 15 deletions

View File

@ -12,6 +12,7 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.11.0", "react-router-dom": "^6.11.0",
"react-select": "^5.7.3", "react-select": "^5.7.3",
"react-spinners": "^0.13.8",
"styled-components": "^6.0.0-rc.1", "styled-components": "^6.0.0-rc.1",
"swiper": "^9.2.4" "swiper": "^9.2.4"
}, },

View File

@ -13,6 +13,7 @@ import 'swiper/css/navigation';
// swiper customization // swiper customization
import './swiper.css'; import './swiper.css';
import ApartamentService from "../../API/ApartamentService"; import ApartamentService from "../../API/ApartamentService";
import { HashLoader } from 'react-spinners';
const SVGIcon = styled(ISVGIcon)` const SVGIcon = styled(ISVGIcon)`
@ -27,10 +28,6 @@ const Title = styled.p`
text-shadow: 0 2px 1px #00000020; text-shadow: 0 2px 1px #00000020;
`; `;
const HighlightWord = styled.span`
color: cornflowerblue;
`;
const SwiperImage = styled.div` const SwiperImage = styled.div`
background: url(${props => props.src ? props.src : ''}); background: url(${props => props.src ? props.src : ''});
background-repeat: no-repeat; background-repeat: no-repeat;
@ -94,13 +91,7 @@ const SubmitBtn = styled.button`
background: royalblue; background: royalblue;
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
color: #f9f9f9; color: #f9f9f9;W
font-weight: 700;
float: right;
&:active {
background: #3759bf
}
`; `;
const SearchBarFilter = styled.div` const SearchBarFilter = styled.div`
@ -166,6 +157,12 @@ const IndexPageRoot = styled.div`
margin: 50px auto margin: 50px auto
`; `;
const Splash = styled.h3`
font-weight: 500;
margin: 48px 0;
text-align: center;
`;
const FiltersForm = () => { const FiltersForm = () => {
const apart_sizes = [ const apart_sizes = [
@ -300,12 +297,14 @@ export default class IndexPage extends React.Component {
apartments: [], apartments: [],
pageSize: 10, pageSize: 10,
page: 0, page: 0,
data_loaded: false data_loaded: false,
load_err: false
}; };
ApartamentService.getAll(100).then(data => { ApartamentService.getAll(100).then(data => {
globalThis.data = data.data.results;
this.setState({apartments: data.data.results, data_loaded: true}); 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> <Title>
Выбор квартиры во Выбор квартиры во
<HighlightWord> Владивостоке</HighlightWord> <span style={{color: '#0066ff'}}> Владивостоке</span>
</Title> </Title>
<FiltersForm /> <FiltersForm />
@ -347,11 +346,19 @@ export default class IndexPage extends React.Component {
{ {
!this.state.data_loaded ? !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 null
} }
{
this.state.load_err ?
<Splash>Ошибка загрузки данных: <br/> {this.state.load_err}</Splash> :
null
}
<PageButtons> <PageButtons>
{ {
[...Array(pages)].map((_, i) => { [...Array(pages)].map((_, i) => {

View File

@ -3282,6 +3282,11 @@ react-select@^5.7.3:
react-transition-group "^4.3.0" react-transition-group "^4.3.0"
use-isomorphic-layout-effect "^1.1.2" 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: react-transition-group@^4.3.0:
version "4.4.5" version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"