feat: improvements for loader to sync with url changes

Author: OrionFable

docs/src/pages/playground/loader.tsx

@@ -1,17 +1,18 @@
-import React, { Fragment } from "react";
+import React from "react";
 import { useLoadingState, useQueryStringState } from "../../../../src/brouther/brouther";
 import { Form, jsonResponse, LoaderProps, useDataLoader } from "../../exports";
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export const loader = async (args: LoaderProps) => {
     const cep = (args.queryString as any).cep || "30260-070";
+    const now = performance.now();
     await sleep(4000);
-    console.log("JSON ->", cep);
+    console.log("LOADER JSON ->", cep, performance.now() - now);
     return jsonResponse({ cep });
 };
 
-const debounce = (fn: Function, ms = 0) => {
+const debounce = (fn: Function, ms: number = 0) => {
     let timeoutId: NodeJS.Timeout;
     return function (...args: any[]) {
         clearTimeout(timeoutId);
@@ -21,30 +22,24 @@ const debounce = (fn: Function, ms = 0) => {
 
 export default function LoaderPage() {
     const data = useDataLoader<typeof loader>();
-    const loading = useLoadingState();
-    const [q, setQ] = useQueryStringState();
+    const [q, setQ] = useQueryStringState<any>();
+    const loading = useLoadingState()
     return (
         <div className="h-full flex flex-col gap-6 items-center justify-center w-full">
-            {loading ? (
-                "Loading..."
-            ) : (
-                <Fragment>
-                    {" "}
-                    <Form method="get" encType="json" className="flex gap-4">
-                        <input name="cep" className="bg-white border p-1" />
-                        <button type="submit">Test</button>
-                    </Form>
-                    <input
-                        className="bg-white border p-1"
-                        placeholder="Debounce test"
-                        onChange={debounce((e: React.ChangeEvent<HTMLInputElement>) => {
-                            setQ({ query: e.target.value });
-                            console.log("After 2 seconds");
-                        }, 1200)}
-                    />
-                    <div>{JSON.stringify(data, null, 4)}</div>
-                </Fragment>
-            )}
+            <p>{loading ? "Loading..." : ""}</p>
+            <Form method="get" encType="json" className="flex gap-4">
+                <input name="cep" className="bg-white border p-1" />
+                <button type="submit">Test</button>
+            </Form>
+            <input
+                className="bg-white border p-1"
+                placeholder="Debounce test"
+                onChange={debounce((e: React.ChangeEvent<HTMLInputElement>) => {
+                    setQ((prev: any) => ({ ...prev, query: e.target.value }));
+                    console.log("After 2 seconds");
+                }, 1200)}
+            />
+            <div>{JSON.stringify({ data, q }, null, 4)}</div>
         </div>
     );
 }