From 6eb491d32264b03e9ebb3b2a3a308d22e6fe1b0d Mon Sep 17 00:00:00 2001
From: rndexe <himanshu.ernde@gmail.com>
Date: Thu, 5 Sep 2024 19:18:28 +0530
Subject: [PATCH] Switch from client:only to client:load

client:load renders HTML on the server/build and loads and hydrates js on the client,
as opposed to client:only which loads, renders and hydrates only on the client
---
 astro/components/playground/Playground.astro |  4 ++--
 astro/components/playground/form.tsx         | 20 +++++++++-----------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/astro/components/playground/Playground.astro b/astro/components/playground/Playground.astro
index aa66447..520a106 100644
--- a/astro/components/playground/Playground.astro
+++ b/astro/components/playground/Playground.astro
@@ -3,5 +3,5 @@ import PlaygroundForm from './form'
 import { Toaster } from './ui/toaster'
 ---
 
-<PlaygroundForm client:only="react" />
-<Toaster client:only="react" />
+<PlaygroundForm client:load />
+<Toaster client:load />
diff --git a/astro/components/playground/form.tsx b/astro/components/playground/form.tsx
index 160bdf9..f343596 100644
--- a/astro/components/playground/form.tsx
+++ b/astro/components/playground/form.tsx
@@ -25,17 +25,8 @@ export default function PlaygroundForm() {
   const { toast } = useToast()
   const { handleSubmit, register, formState } = useForm<{ url: string; version: string }>()
   const [output, setOutput] = useState<WASMResponse | undefined>()
-  const searchParams = useMemo<URLSearchParams>(
-    () => new URLSearchParams(window.location.search),
-    [],
-  )
-  const defaultValue = useMemo<string>(() => {
-    const search = searchParams.get('url')
-    if (search) {
-      return decodeURI(search)
-    }
-    return window.location.href
-  }, [searchParams.get])
+
+  const [defaultValue, setdefaultValue] = useState<string>('')
   const onSubmit = useCallback(
     async (data: { url: string; version: string }) => {
       try {
@@ -57,6 +48,13 @@ export default function PlaygroundForm() {
     [toast],
   )
 
+  // This function only runs on mounting/refresh to set initial default value
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search)
+    const search = searchParams.get('url')
+    setdefaultValue(search ? decodeURI(search) : window.location.href)
+  }, [])
+
   useEffect(() => {
     onSubmit({ url: defaultValue, version: versions[0] })
   }, [defaultValue, onSubmit])