From d84f6f864f54356a7c54d359dcde7883d9471d88 Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Tue, 26 Nov 2024 12:05:52 +0100
Subject: [PATCH] fix: no close search popup when loading results

---
 RELEASE.md                                         |  1 +
 .../Header/HeaderSearch/SearchModal.jsx            | 14 +++++++++++---
 src/theme/extras/_modals.scss                      | 13 +++++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/RELEASE.md b/RELEASE.md
index a1fe7e42b..9b9e46791 100644
--- a/RELEASE.md
+++ b/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.
 
 ### Novità
 
diff --git a/src/components/ItaliaTheme/Header/HeaderSearch/SearchModal.jsx b/src/components/ItaliaTheme/Header/HeaderSearch/SearchModal.jsx
index c05082673..b1f86e737 100644
--- a/src/components/ItaliaTheme/Header/HeaderSearch/SearchModal.jsx
+++ b/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>
   );
diff --git a/src/theme/extras/_modals.scss b/src/theme/extras/_modals.scss
index d9a8423c3..1e8d37e6e 100644
--- a/src/theme/extras/_modals.scss
+++ b/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;
+  }
 }