Prevent previews from rendering on the server

middlewarehq · Dec 13, 2023 · eb14393 · eb14393
1 parent 2c5e10f
commit eb14393
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/components/LoaderWithFacts.tsx b/src/components/LoaderWithFacts.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { ScatterBoxLoader } from 'react-awesome-loaders';
 import { randInt } from '@/utils/number';
+import { useIsClient } from 'usehooks-ts';
 
 const openSourceStats = [
   "Did you know: Rust has been the consistently most loved language in the last 3 years of StackOverflow's dev survey",
@@ -29,12 +30,9 @@ export const LoaderWithFacts = () => {
     };
   }, [currentIndex]);
 
-  const [isClient, setIsClient] = useState(false);
+  const isClient = useIsClient();
 
   useEffect(() => {
-    setIsClient(true);
-
-    if (!window) return;
     setCurrentText(openSourceStats[currentIndex]);
   }, [currentIndex]);
 

diff --git a/src/pages/previews.tsx b/src/pages/previews.tsx
@@ -2,8 +2,11 @@ import React from 'react';
 import { CARD_HEIGHT, CARD_WIDTH } from '../constants/general';
 import Image from 'next/image';
 import { ShareButton } from '@/components/ShareButton';
+import { useIsClient } from 'usehooks-ts';
 
 const Previews = () => {
+  const isClient = useIsClient();
+
   const links = [
     `/api/preview/intro`,
     `/api/preview/timebased/allday`,
@@ -20,6 +23,8 @@ const Previews = () => {
     `/api/preview/oss`
   ];
 
+  if (!isClient) return;
+
   return (
     <div className="flex flex-col bg-white text-black">
       <a