add filter loading spinner

This commit is contained in:
b1ek 2023-05-11 23:45:00 +10:00
parent eb89bb3526
commit 2ff0851d60
Signed by: blek
GPG Key ID: 14546221E3595D0C
1 changed files with 24 additions and 6 deletions

View File

@ -96,6 +96,11 @@ const SubmitBtn = styled.button`
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
color: #f9f9f9; color: #f9f9f9;
width: 180px;
&:disabled {
background: #3a5dc8;
}
`; `;
const SearchBarFilter = styled.div` const SearchBarFilter = styled.div`
@ -312,9 +317,18 @@ const FiltersForm = (props) => {
</SearchBarText> </SearchBarText>
</SearchBarFilter> </SearchBarFilter>
<SubmitBtn onClick={onSumbit}> <SubmitBtn onClick={onSumbit} disabled={props.loading}>
<SVGIcon src='/images/icons/search.svg' width='14' height='14' /> {
Показать варианты props.loading ?
<>
<HashLoader color='#a1adb3' cssOverride={{marginRight: 6, transform: 'translate(-3px, 2px) scale(1.5)'}} size={14} />
Загрузка данных...
</> :
<>
<SVGIcon src='/images/icons/search.svg' width='14' height='14' />
Показать варианты
</>
}
</SubmitBtn> </SubmitBtn>
</FiltersEl> </FiltersEl>
); );
@ -331,7 +345,8 @@ export default class IndexPage extends React.Component {
pageSize: 10, pageSize: 10,
page: 0, page: 0,
data_loaded: false, data_loaded: false,
load_err: false load_err: false,
loading_filters: false
}; };
ApartamentService.getAll(100).then(data => { ApartamentService.getAll(100).then(data => {
@ -348,6 +363,8 @@ export default class IndexPage extends React.Component {
* @param {Filters} filters * @param {Filters} filters
*/ */
async filterData(filters) { async filterData(filters) {
this.setState({loading_filters: true});
const filtered_raw = await fetch(API_ROOT + '/api/apartaments/filters/', { const filtered_raw = await fetch(API_ROOT + '/api/apartaments/filters/', {
method: 'POST', method: 'POST',
@ -395,9 +412,10 @@ export default class IndexPage extends React.Component {
<span style={{color: '#0066ff'}}> Владивостоке</span> <span style={{color: '#0066ff'}}> Владивостоке</span>
</Title> </Title>
<FiltersForm onSubmit={this.filterData} /> <FiltersForm onSubmit={this.filterData} loading={this.state.loading_filters} />
<ApartmentsList list={current_data} loading={this.state.loading_filters} />
<ApartmentsList list={current_data} />
{ {
!this.state.data_loaded ? !this.state.data_loaded ?
<> <>