From eb14393a27df85ae19e5732deffe125660ddb08e Mon Sep 17 00:00:00 2001
From: Jayant Bhawal <bhawal.jayant@gmail.com>
Date: Wed, 13 Dec 2023 09:04:13 +0530
Subject: [PATCH] Prevent previews from rendering on the server

---
 src/components/LoaderWithFacts.tsx | 6 ++----
 src/pages/previews.tsx             | 5 +++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/LoaderWithFacts.tsx b/src/components/LoaderWithFacts.tsx
index e22e48d..0915fde 100644
--- 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
index 4f39ada..2db4b18 100644
--- 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