fix: loading search results modal

RedTurtle · Nov 26, 2024 · a84380b · a84380b
1 parent 3b5b9ae
commit a84380b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/components/ItaliaTheme/Header/HeaderSearch/SearchModal.jsx b/src/components/ItaliaTheme/Header/HeaderSearch/SearchModal.jsx
@@ -26,6 +26,7 @@ import {
   FormGroup,
   Input,
   Label,
+  Spinner,
   Toggle,
 } from 'design-react-kit/dist/design-react-kit';
 
@@ -167,7 +168,7 @@ const SearchModal = ({ closeModal, show }) => {
 
   const dispatch = useDispatch();
   const location = useLocation();
-
+  const [redirectingToResults, setRedirectingToResults] = useState(false);
   const [advancedSearch, setAdvancedSearch] = useState(false);
   const [advancedTab, setAdvancedTab] = useState(null);
   const [searchableText, setSearchableText] = useState(
@@ -291,10 +292,11 @@ const SearchModal = ({ closeModal, show }) => {
     setOptions((prevOptions) => ({ ...prevOptions, [optId]: value }));
 
   const submitSearch = () => {
+    setRedirectingToResults(true);
     setAdvancedSearch(false);
-    setTimeout(() => {
-      closeModal();
-    }, 500);
+    // setTimeout(() => {
+    //   closeModal();
+    // }, 500);
   };
 
   const handleEnterSearch = (e) => {
@@ -915,6 +917,11 @@ const SearchModal = ({ closeModal, show }) => {
             </div>
           )}
         </Container>
+        {redirectingToResults && (
+          <div className="overlay loading-results">
+            <Spinner active />
+          </div>
+        )}
       </ModalBody>
     </Modal>
   );

diff --git a/theme/extras/_modals.scss b/theme/extras/_modals.scss
@@ -33,4 +33,17 @@
   .chip {
     cursor: pointer;
   }
+
+  .overlay.loading-results {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    background-color: hsl(0deg 0% 100% / 64%);
+  }
 }