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