add filter loading spinner

pairent_frontend_react/src/pages/IndexPage/index.jsx

@@ -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}>
+            <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>
         </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 => {
@@ -349,6 +364,8 @@ export default class IndexPage extends React.Component {
      */
     async filterData(filters) {
 
+        this.setState({loading_filters: true});
+        
         const filtered_raw = await fetch(API_ROOT + '/api/apartaments/filters/', {
             method: 'POST',
             body: JSON.stringify(filters),
@@ -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 ?
                     <>