From bfad01fc91f6dc9590dd1d6d93b64d1ffb64f5c1 Mon Sep 17 00:00:00 2001
From: Bram Suurd <bram.suurd@infracom.nl>
Date: Mon, 29 Sep 2025 16:54:51 +0200
Subject: [PATCH] refactor: replace useQueryState with useSuspenseQueryState in
 ScriptContent and MobileSidebar components; add use-suspense-query-state hook

---
 frontend/src/app/scripts/page.tsx             |  6 ++---
 .../components/navigation/mobile-sidebar.tsx  | 18 +++++++++----
 .../src/hooks/use-suspense-query-state.ts     | 27 +++++++++++++++++++
 3 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/hooks/use-suspense-query-state.ts

diff --git a/frontend/src/app/scripts/page.tsx b/frontend/src/app/scripts/page.tsx
index 906611216..f930f35a1 100644
--- a/frontend/src/app/scripts/page.tsx
+++ b/frontend/src/app/scripts/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 import { Suspense, useEffect, useState } from "react";
 import { Loader2 } from "lucide-react";
-import { useQueryState } from "nuqs";
 
 import type { Category, Script } from "@/lib/types";
 
+import { useSuspenseQueryState } from "@/hooks/use-suspense-query-state";
 import { ScriptItem } from "@/app/scripts/_components/script-item";
 import { fetchCategories } from "@/lib/data";
 
@@ -14,8 +14,8 @@ import Sidebar from "./_components/sidebar";
 export const dynamic = "force-static";
 
 function ScriptContent() {
-  const [selectedScript, setSelectedScript] = useQueryState("id");
-  const [selectedCategory, setSelectedCategory] = useQueryState("category");
+  const [selectedScript, setSelectedScript] = useSuspenseQueryState("id");
+  const [selectedCategory, setSelectedCategory] = useSuspenseQueryState("category");
   const [links, setLinks] = useState<Category[]>([]);
   const [item, setItem] = useState<Script>();
 
diff --git a/frontend/src/components/navigation/mobile-sidebar.tsx b/frontend/src/components/navigation/mobile-sidebar.tsx
index b4fcd9e0f..55bc24c5f 100644
--- a/frontend/src/components/navigation/mobile-sidebar.tsx
+++ b/frontend/src/components/navigation/mobile-sidebar.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
-import { useQueryState } from "nuqs";
+import { Suspense, useCallback, useEffect, useState } from "react";
 import { Menu } from "lucide-react";
 
 import type { Category, Script } from "@/lib/types";
 
+import { useSuspenseQueryState } from "@/hooks/use-suspense-query-state";
 import { ScriptItem } from "@/app/scripts/_components/script-item";
 import Sidebar from "@/app/scripts/_components/sidebar";
 import { fetchCategories } from "@/lib/data";
@@ -13,13 +13,13 @@ import { fetchCategories } from "@/lib/data";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
 import { Button } from "../ui/button";
 
-function MobileSidebar() {
+function MobileSidebarContent() {
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [categories, setCategories] = useState<Category[]>([]);
   const [lastViewedScript, setLastViewedScript] = useState<Script | undefined>(undefined);
-  const [selectedScript, setSelectedScript] = useQueryState("id");
-  const [selectedCategory, setSelectedCategory] = useQueryState("category");
+  const [selectedScript, setSelectedScript] = useSuspenseQueryState("id");
+  const [selectedCategory, setSelectedCategory] = useSuspenseQueryState("category");
 
   const loadCategories = useCallback(async () => {
     setIsLoading(true);
@@ -113,4 +113,12 @@ function MobileSidebar() {
   );
 }
 
+function MobileSidebar() {
+  return (
+    <Suspense fallback={null}>
+      <MobileSidebarContent />
+    </Suspense>
+  );
+}
+
 export default MobileSidebar;
diff --git a/frontend/src/hooks/use-suspense-query-state.ts b/frontend/src/hooks/use-suspense-query-state.ts
new file mode 100644
index 000000000..abfcf069e
--- /dev/null
+++ b/frontend/src/hooks/use-suspense-query-state.ts
@@ -0,0 +1,27 @@
+"use client";
+
+import type { SetStateAction } from "react";
+
+import { useSearchParams } from "next/navigation";
+import { useTransition } from "react";
+import { useQueryState } from "nuqs";
+
+type SuspenseQueryStateSetter<T> = (value: SetStateAction<T | null>) => void;
+type SuspenseQueryStateTuple<T> = [T | null, SuspenseQueryStateSetter<T>];
+
+export function useSuspenseQueryState<T extends string>(key: string): SuspenseQueryStateTuple<T> {
+  const params = useSearchParams();
+  const [, startTransition] = useTransition();
+  const [value, setValue] = useQueryState<T | null>(key, { shallow: true, parse: value => value as T | null });
+
+  if (!params) {
+    throw new Error("useSuspenseQueryState must be used within a Next.js app router context.");
+  }
+  const setNextValue: SuspenseQueryStateSetter<T> = (nextValue) => {
+    startTransition(() => {
+      setValue(nextValue);
+    });
+  };
+
+  return [value, setNextValue];
+}