add loading spinner
This commit is contained in:
parent
4b55008f16
commit
85ff547eea
|
@ -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"
|
||||||
},
|
},
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue