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

@@ -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 />

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])