From e63626be72b52b8ba561f6a5b561434befdacb30 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 4 Sep 2023 15:34:54 +0800
Subject: [PATCH] Force help boxes to only render client side

---
 packages/web/components/elements/FeatureHelpBox.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/elements/FeatureHelpBox.tsx b/packages/web/components/elements/FeatureHelpBox.tsx
index bb292aeac..d8cb67ef0 100644
--- a/packages/web/components/elements/FeatureHelpBox.tsx
+++ b/packages/web/components/elements/FeatureHelpBox.tsx
@@ -1,11 +1,10 @@
-'use client'
-
 import { HStack, SpanBox, VStack } from './LayoutPrimitives'
 import { theme } from '../tokens/stitches.config'
 import { Button } from './Button'
 import { CloseIcon } from './icons/CloseIcon'
 import { HelpfulOwlImage } from './images/HelpfulOwlImage'
 import { ArrowSquareOut } from 'phosphor-react'
+import { useEffect, useState } from 'react'
 
 type FeatureHelpBoxProps = {
   helpTitle: string
@@ -21,6 +20,12 @@ type FeatureHelpBoxProps = {
 }
 
 export const FeatureHelpBox = (props: FeatureHelpBoxProps) => {
+  const [display, setDisplay] = useState(false)
+
+  useEffect(() => {
+    setDisplay(true)
+  }, [])
+
   return (
     <HStack
       css={{