Bugs

SU-SWS · Oct 28, 2024 · 4dd8280 · 4dd8280
1 parent 2f47970
commit 4dd8280
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/src/components/page-types/searchPage.jsx b/src/components/page-types/searchPage.jsx
@@ -59,7 +59,7 @@ const SearchPage = (props) => {
       stalledSearchDelay={2000}
       routing={routing}
       future={{
-        preserveSharedStateOnUnmount: true,
+        preserveSharedStateOnUnmount: false,
       }}
       insights
     >

diff --git a/src/components/search/SearchFacet.jsx b/src/components/search/SearchFacet.jsx
@@ -59,7 +59,7 @@ const SearchFacet = ({ className, attribute, label, excludes = [] }) => {
 
       {filteredItems.map((option, index) => (
         <label
-          key={slugify(option.value)}
+          key={`attriute-${slugify(option.value)}`}
           className={`su-label su-flex su-items-center su-cursor-pointer su-text-19 hover:su-text-digital-red-xlight
           ${index ? 'su-mt-20' : ''}`}
         >

diff --git a/src/components/search/SearchPageContent.jsx b/src/components/search/SearchPageContent.jsx
@@ -6,7 +6,7 @@ import {
   ClearRefinements,
 } from 'react-instantsearch';
 import SbEditable from 'storyblok-react';
-import { dcnb } from 'cnbuilder';
+import { cnb, dcnb } from 'cnbuilder';
 import Icon from 'react-hero-icon';
 import { Container } from '../layout/Container';
 import Layout from '../partials/Layout';
@@ -34,7 +34,7 @@ import useDisplay from '../../hooks/useDisplay';
 const SearchPageContent = (props) => {
   const { blok } = props;
   const { nbHits, areHitsSorted, nbSortedHits } = useStats();
-  const { status } = useInstantSearch();
+  const { status, started } = useInstantSearch();
   const [opened, setOpened] = useState(false);
   const { refine: clearFilters } = useClearRefinements();
   const { showDesktop, showMobile } = useDisplay();
@@ -49,6 +49,10 @@ const SearchPageContent = (props) => {
     return nbHits;
   }, [areHitsSorted, nbHits, nbSortedHits]);
 
+  const isLoading = status === 'loading' && started;
+  const isIdle = status === 'idle' && started;
+  const hasNoResults = resultCount === 0 && isIdle && started;
+
   return (
     <SbEditable content={blok}>
       <Layout hasHero={false} {...props} blok={blok}>
@@ -75,7 +79,10 @@ const SearchPageContent = (props) => {
                 resultCount > 0 ? 'lg:su-col-start-4' : 'lg:su-col-start-3'
               }
             >
-              <SearchField emptySearchMessage={blok.emptySearchMessage} />
+              <SearchField
+                emptySearchMessage={blok.emptySearchMessage}
+                className={cnb({ 'su-opacity-30': isLoading })}
+              />
             </GridCell>
           </Grid>
 
@@ -180,7 +187,7 @@ const SearchPageContent = (props) => {
           <Grid
             xs={12}
             className={dcnb('filters su-rs-mt-7 lg:su-grid-gap', {
-              'su-hidden': !nbHits && status === 'idle',
+              'su-hidden': hasNoResults,
             })}
           >
             {/* DESKTOP FILTERS */}
@@ -244,7 +251,7 @@ const SearchPageContent = (props) => {
             </GridCell>
           </Grid>
 
-          {!nbHits && status === 'idle' && (
+          {hasNoResults && (
             <Grid xs={12} className="su-rs-mt-7">
               <SearchNoResults
                 heading={blok.noResultsHeading}

diff --git a/src/components/search/SearchResults.jsx b/src/components/search/SearchResults.jsx
@@ -43,7 +43,7 @@ const SearchResults = () => {
     <div
       id="search-results"
       className={cnb({
-        'su-opacity-50': isLoading,
+        'su-opacity-30': isLoading,
       })}
     >
       <div