From 8a891b93acc76b476c92fececf7372643223821e Mon Sep 17 00:00:00 2001
From: Martina Bustacchini <41484878+deodorhunter@users.noreply.github.com>
Date: Thu, 21 Sep 2023 11:53:59 +0200
Subject: [PATCH] fix: fix search results usability for a11y (#346)

* fix: incorrect logic for determining if search is ongoing, less layout shifts

* chore: add .gitattributes to make release.md less of a nightmare to deal with
---
 .gitattributes                               |   1 +
 RELEASE.md                                   |   2 +
 src/components/ItaliaTheme/Search/Search.jsx | 153 ++++++++++---------
 theme/extras/_search.scss                    |   6 +
 4 files changed, 90 insertions(+), 72 deletions(-)
 create mode 100644 .gitattributes

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 000000000..aebb5c663
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+RELEASE.md merge=union
diff --git a/RELEASE.md b/RELEASE.md
index 0eaa3fb30..0e612a4d4 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -41,6 +41,8 @@
 ### Fix
 
 - Fissato il layout del template Blocco link solo immagini con link esterni, icona accessibilità per link esterni ora è posizionata invece in overlay se presente
+- Sistemata la visualizzazione dello stato di caricamento della pagina /search
+
 
 ## Versione 7.21.0 (19/09/2023)
 
diff --git a/src/components/ItaliaTheme/Search/Search.jsx b/src/components/ItaliaTheme/Search/Search.jsx
index 07a89cbb3..6c826c543 100644
--- a/src/components/ItaliaTheme/Search/Search.jsx
+++ b/src/components/ItaliaTheme/Search/Search.jsx
@@ -6,7 +6,7 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl, defineMessages } from 'react-intl';
-import { values } from 'lodash';
+import { values, isEmpty } from 'lodash';
 import cx from 'classnames';
 import qs from 'query-string';
 import moment from 'moment';
@@ -325,7 +325,7 @@ const Search = () => {
       true,
     );
 
-    searchResults.result &&
+    !isEmpty(searchResults.result) &&
       history.push(
         getSearchParamsURL(
           searchableText,
@@ -350,7 +350,6 @@ const Search = () => {
   }, 0);
   let activeTopics = values(topics).filter((t) => t.value).length;
   let activePortalTypes = values(portalTypes).filter((ct) => ct.value).length;
-
   return (
     <>
       <Helmet title={intl.formatMessage(messages.searchResults)} />
@@ -615,77 +614,87 @@ const Search = () => {
             </aside>
 
             <Col lg={9} tag="section" className="py-lg-5">
-              {searchResults.loadingResults ? (
-                <Spinner active />
-              ) : searchResults?.result?.items_total > 0 ? (
-                <div
-                  className="search-results-wrapper"
-                  role="region"
-                  id="search-results-region"
-                  aria-live="polite"
-                >
-                  <div className="d-block ordering-widget">
-                    <Row className="pb-3 border-bottom">
-                      <Col xs={6} className="align-self-center">
-                        <p className="d-none d-lg-block" aria-live="polite">
-                          {intl.formatMessage(messages.foundNResults, {
-                            total: searchResults.result.items_total,
-                          })}
-                        </p>
-                        <p className="d-block d-lg-none mb-0 text-right">
-                          {intl.formatMessage(messages.orderBy)}
-                        </p>
-                      </Col>
-                      <Col xs={6}>
-                        <SelectInput
-                          id="search-sort-on"
-                          value={
-                            sortOnOptions.filter((o) => o.value === sortOn)[0]
-                          }
-                          label={intl.formatMessage(messages.orderBy)}
-                          placeholder={
-                            sortOnOptions.find((o) => o.value === sortOn).label
-                          }
-                          onChange={(opt) => setSortOn(opt.value)}
-                          options={sortOnOptions}
-                          defaultValue={sortOnOptions.find(
-                            (o) => o.value === 'relevance',
-                          )}
-                        />
-                      </Col>
-                    </Row>
-                  </div>
-                  <Row>
-                    {searchResults?.result?.items?.map((item, index) => (
-                      <Col md={12} key={item['@id']} className="p-0">
-                        <SearchResultItem
-                          item={item}
-                          index={index}
-                          searchableText={searchableText}
-                          section={getSectionFromId(item['@id'])}
-                        />
-                      </Col>
-                    ))}
+              <div
+                className="search-results-wrapper"
+                role="region"
+                id="search-results-region"
+                aria-live="polite"
+              >
+                <div className="d-block ordering-widget">
+                  <Row className="pb-3 border-bottom">
+                    <Col xs={6} className="align-self-center">
+                      <p className="d-none d-lg-block" aria-live="polite">
+                        {intl.formatMessage(messages.foundNResults, {
+                          total: searchResults?.result?.items_total || 0,
+                        })}
+                      </p>
+                      <p className="d-block d-lg-none mb-0 text-end">
+                        {intl.formatMessage(messages.orderBy)}
+                      </p>
+                    </Col>
+                    <Col xs={6}>
+                      <SelectInput
+                        id="search-sort-on"
+                        value={
+                          sortOnOptions.filter((o) => o.value === sortOn)[0]
+                        }
+                        label={intl.formatMessage(messages.orderBy)}
+                        placeholder={
+                          sortOnOptions.find((o) => o.value === sortOn).label
+                        }
+                        onChange={(opt) => setSortOn(opt.value)}
+                        options={sortOnOptions}
+                        defaultValue={sortOnOptions.find(
+                          (o) => o.value === 'relevance',
+                        )}
+                      />
+                    </Col>
                   </Row>
-                  {searchResults?.result?.batching && (
-                    <Pagination
-                      activePage={currentPage}
-                      totalPages={Math.ceil(
-                        (searchResults?.result?.items_total ?? 0) /
-                          config.settings.defaultPageSize,
-                      )}
-                      onPageChange={handleQueryPaginationChange}
-                    />
-                  )}
                 </div>
-              ) : searchResults.error ? (
-                <Alert color="danger">
-                  <strong>{intl.formatMessage(messages.attenzione)}</strong>{' '}
-                  {intl.formatMessage(messages.errors_occured)}
-                </Alert>
-              ) : (
-                <p>{intl.formatMessage(messages.no_results)}</p>
-              )}
+
+                {searchResults.loadingResults ||
+                (!searchResults.hasError && isEmpty(searchResults.result)) ? (
+                  <div className="searchSpinnerWrapper">
+                    <Spinner active />
+                  </div>
+                ) : searchResults?.result?.items_total > 0 ? (
+                  <>
+                    <Row>
+                      {searchResults?.result?.items?.map((item, index) => (
+                        <Col md={12} key={item['@id']} className="p-0">
+                          <SearchResultItem
+                            item={item}
+                            index={index}
+                            searchableText={searchableText}
+                            section={getSectionFromId(item['@id'])}
+                          />
+                        </Col>
+                      ))}
+                    </Row>
+                    {searchResults?.result?.batching && (
+                      <Pagination
+                        activePage={currentPage}
+                        totalPages={Math.ceil(
+                          (searchResults?.result?.items_total ?? 0) /
+                            config.settings.defaultPageSize,
+                        )}
+                        onPageChange={handleQueryPaginationChange}
+                      />
+                    )}
+                  </>
+                ) : searchResults.error ? (
+                  <Alert color="danger">
+                    <strong>{intl.formatMessage(messages.attenzione)}</strong>{' '}
+                    {intl.formatMessage(messages.errors_occured)}
+                  </Alert>
+                ) : (
+                  !searchResults?.hasError &&
+                  !isEmpty(searchResults?.result) &&
+                  searchResults.result?.items.length === 0 && (
+                    <p>{intl.formatMessage(messages.no_results)}</p>
+                  )
+                )}
+              </div>
             </Col>
           </Row>
         </Container>
diff --git a/theme/extras/_search.scss b/theme/extras/_search.scss
index cfbca9f3a..90c1d92c0 100644
--- a/theme/extras/_search.scss
+++ b/theme/extras/_search.scss
@@ -112,4 +112,10 @@ body.search-modal-opened {
       outline: none !important;
     }
   }
+  .searchSpinnerWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 0;
+  }
 }