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