Merge pull request DefiLlama#528 from 0xsign/fix/banners-hydration-rand

fix: random banners hydration issue
BlockPILabs · Jun 3, 2023 · 6bce830 · 6bce830
2 parents 783b5b2 + b0e7456
commit 6bce830
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/components/AdBanner/index.js b/components/AdBanner/index.js
@@ -1,5 +1,5 @@
 import * as Fathom from "fathom-client";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { FATHOM_ADS_ID } from "../../hooks/useAnalytics";
 import { notTranslation as useTranslations, shuffleArray } from "../../utils";
@@ -22,12 +22,18 @@ const BANNERS = [
   // },
 ];
 
+const randomBanners = shuffleArray(BANNERS);
+
 export const AdBanner = ({ timer = 15000, startTransition = true, showControls = false }) => {
   const t = useTranslations("Common");
+  const [isMounted, setIsMounted] = useState(false);
 
   const [currentIndex, setCurrentIndex] = useState(0);
 
-  const randomBanners = useMemo(() => shuffleArray(BANNERS), []);
+  // only render the image client-side to prevent hydration errors due to the random banners
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
 
   useEffect(() => {
     const intervalId = setInterval(() => {
@@ -95,7 +101,7 @@ export const AdBanner = ({ timer = 15000, startTransition = true, showControls =
               className="rounded-[10px] duration-500 w-full h-full"
             />
 
-            <img src={srcLarge} alt={srcName} className="rounded-[10px] duration-500 w-full h-full" />
+            {isMounted && <img src={srcLarge} alt={srcName} className="rounded-[10px] duration-500 w-full h-full" />}
           </picture>
         </a>