From 3071b3344f8a8e55403a87aaef0ae390d35822c4 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Tue, 2 Jul 2024 17:57:36 +0200
Subject: [PATCH] Fix hydration issue with ResultCardCarousel

---
 .../ResultCard/ResultCardCarousel/ResultCardCarousel.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/pages/search/components/ResultCard/ResultCardCarousel/ResultCardCarousel.tsx b/frontend/src/components/pages/search/components/ResultCard/ResultCardCarousel/ResultCardCarousel.tsx
index b1ff00597..7f15b8211 100644
--- a/frontend/src/components/pages/search/components/ResultCard/ResultCardCarousel/ResultCardCarousel.tsx
+++ b/frontend/src/components/pages/search/components/ResultCard/ResultCardCarousel/ResultCardCarousel.tsx
@@ -1,7 +1,9 @@
 import { CardIcon } from 'components/CardIcon';
 import { SmallCarousel } from 'components/Carousel';
 import { ImageWithLegend } from 'components/ImageWithLegend';
+import useHasMounted from 'hooks/useHasMounted';
 import { ContentType, ImageFromAttachment } from 'modules/interface';
+import { cn } from 'services/utils/cn';
 
 interface ResultCardCarouselProps {
   type: ContentType;
@@ -23,13 +25,12 @@ export const ResultCardCarousel: React.FC<ResultCardCarouselProps> = ({
   redirect,
   asColumn,
 }) => {
-  const files = typeof navigator !== 'undefined' && navigator?.onLine ? images : images.slice(0, 1);
+  const hasNavigator = useHasMounted(typeof navigator !== 'undefined' && navigator.onLine);
+  const files = hasNavigator ? images : images.slice(0, 1);
 
   return (
     <div
-      className={`size-full grow relative ${
-        asColumn !== true ? 'desktop:w-resultCardDesktop' : ''
-      }`}
+      className={cn('size-full grow relative', asColumn !== true && 'desktop:w-resultCardDesktop')}
     >
       <SmallCarousel>
         {files.map((image, index) => (