From d1b5abf331895ed9040096bf04e18db78fc0d1e1 Mon Sep 17 00:00:00 2001
From: Francois Best <github@francoisbest.com>
Date: Wed, 25 Oct 2023 07:23:41 +0200
Subject: [PATCH] chore: Split throttling page

---
 .../src/app/demos/throttling/client.tsx       | 23 ++++++++++
 .../src/app/demos/throttling/page.tsx         | 45 +++----------------
 2 files changed, 28 insertions(+), 40 deletions(-)
 create mode 100644 packages/playground/src/app/demos/throttling/client.tsx

diff --git a/packages/playground/src/app/demos/throttling/client.tsx b/packages/playground/src/app/demos/throttling/client.tsx
new file mode 100644
index 000000000..e5ce5c12a
--- /dev/null
+++ b/packages/playground/src/app/demos/throttling/client.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { parseAsString, useQueryState } from 'src/nuqs'
+
+export function Client() {
+  const [q, setQ] = useQueryState(
+    'q',
+    parseAsString
+      .withOptions({ throttleMs: 350, shallow: false })
+      .withDefault('')
+  )
+
+  return (
+    <>
+      <input
+        value={q}
+        onChange={e => setQ(e.target.value)}
+        placeholder="Search"
+      />
+      <p>Query: {q || <em>empty</em>}</p>
+    </>
+  )
+}
diff --git a/packages/playground/src/app/demos/throttling/page.tsx b/packages/playground/src/app/demos/throttling/page.tsx
index aefe7ec00..3b1e8434e 100644
--- a/packages/playground/src/app/demos/throttling/page.tsx
+++ b/packages/playground/src/app/demos/throttling/page.tsx
@@ -1,49 +1,14 @@
-'use client'
-
-import { parseAsInteger, useQueryState } from 'src/nuqs'
+import { Suspense } from 'react'
+import { Client } from './client'
 
 export default function ThottlingDemoPage() {
-  const [a, setA] = useQueryState('a', parseAsInteger.withDefault(0))
-  const [b, setB] = useQueryState('b', parseAsInteger.withDefault(0))
-
   return (
     <>
       <h1>Throttled counters</h1>
       <p>Note: URL state updated are intentionally slowed down</p>
-      <nav style={{ display: 'flex', gap: '4px' }}>
-        <button
-          style={{ padding: '2px 12px' }}
-          onClick={() => {
-            console.debug('decrement')
-            setA(x => x - 1, { throttleMs: 1000 })
-            setB(x => x - 1, { throttleMs: 2000 })
-          }}
-        >
-          -
-        </button>
-        <button
-          style={{ padding: '2px 12px' }}
-          onClick={() => {
-            console.debug('increment')
-            setA(x => x + 1, { throttleMs: 2000 })
-            setB(x => x + 1, { throttleMs: 1000 })
-          }}
-        >
-          +
-        </button>
-        <button
-          style={{ padding: '2px 6px' }}
-          onClick={() => {
-            console.debug('clear')
-            setB(null)
-            setA(null, { throttleMs: 1000 })
-          }}
-        >
-          Reset
-        </button>
-      </nav>
-      <p>A: {a}</p>
-      <p>B: {b}</p>
+      <Suspense>
+        <Client />
+      </Suspense>
       <p>
         <a href="https://github.com/47ng/next-usequerystate/blob/next/src/app/demos/thottling/page.tsx">
           Source on GitHub