add filter loading spinner
This commit is contained in:
parent
eb89bb3526
commit
2ff0851d60
|
@ -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 ?
|
||||
<>
|
||||
|
|
Loading…
Reference in New Issue