fix: no close search popup when loading results (#819)

Co-authored-by: Martina Bustacchini <[email protected]>

RELEASE.md

@@ -46,6 +46,7 @@
 ### Migliorie
 
 - Rimossa dal CT Evento la data di scadenza del CT per evitare confusione con le date effettive dell'evento
+- Durante la ricerca nel sito dalla popup che compare cliccando sul bottone 'Cerca' nella testa del sito, viene mostrato un loader in overlay durante il caricamento della pagina dei risultati perchè questo potrebbe richiedere un po' di tempo. Prima di questa modifica non era chiaro se la ricerca fosse iniziata.
 - Nel CT Evento per una rassegna, se gli eventi figli hanno una ricorrenza o un periodo di date impostato, il range di date verrà mostrato nella card all'interno dell'evento padre.
 
 ### Novità

src/components/ItaliaTheme/Header/HeaderSearch/SearchModal.jsx

@@ -28,6 +28,7 @@ import {
   Input,
   Label,
   Toggle,
+  Spinner,
 } from 'design-react-kit';
 
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
@@ -173,6 +174,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(
@@ -296,10 +298,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) => {
@@ -923,6 +926,11 @@ const SearchModal = ({ closeModal, show }) => {
             </div>
           )}
         </Container>
+        {redirectingToResults && (
+          <div className="overlay loading-results">
+            <Spinner active />
+          </div>
+        )}
       </ModalBody>
     </Modal>
   );

src/theme/extras/_modals.scss

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