chore: Split throttling page

47ng · Oct 25, 2023 · d1b5abf · d1b5abf
1 parent 06ece2c
commit d1b5abf
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 40 deletions.
diff --git a/packages/playground/src/app/demos/throttling/client.tsx 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
@@ -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