readd loading indicator

app/(stats)/compositions/page.tsx

@@ -29,6 +29,7 @@ import { SortParam } from '@/ui/params/sort-param';
 import { Compositions } from './compositions';
 import { Suspense } from 'react';
 import { toDateRange } from '@/lib/utils/params.utils';
+import { Filter } from '@/ui/params/filter';
 
 // Metadata
 // ---------------
@@ -143,12 +144,12 @@ const CompositionsPage = async ({ searchParams }: PageProps) => {
           </Inline>
         </Caption>
       </div>
-      <Inline className="gap-2 pb-8 sm:gap-4" align="end">
+      <Filter>
         <SmallSamplesFilter />
         <DateRangeFilter />
         <FactionFilter />
         <SortParam />
-      </Inline>
+      </Filter>
       <Suspense fallback={<CardTableSkeleton />}>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-12">
           <div className="col-span-full">

ui/params/filter.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { Inline } from '../inline';
+import { Spinner } from '../spinner';
+import { ParamsProvier, useParamsContext } from './useParams';
+
+const Loading = () => {
+  const { pending } = useParamsContext();
+  return pending ? <Spinner className="h-4 w-4" /> : null;
+};
+
+export const Filter = ({ children }: { children?: ReactNode }) => (
+  <Inline className="gap-2 pb-8 sm:gap-4" align="end">
+    <ParamsProvier>
+      <Loading />
+      {children}
+    </ParamsProvier>
+  </Inline>
+);

ui/params/useParams.tsx

@@ -1,13 +1,37 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { createContext, useContext, useTransition } from 'react';
+import type { ReactNode, TransitionStartFunction } from 'react';
+
+// Context
+// ---------------
+const Context = createContext<{
+  pending: boolean;
+  startTransition: TransitionStartFunction;
+}>({} as any);
+
+export const useParamsContext = () => useContext(Context);
+
+// Provider
+// ---------------
+export const ParamsProvier = ({ children }: { children?: ReactNode }) => {
+  const [pending, startTransition] = useTransition();
+
+  return (
+    <Context.Provider value={{ pending, startTransition }}>
+      {children}
+    </Context.Provider>
+  );
+};
 
 // Hook
 // ---------------
 export const useParams = <Params extends string>(keys: Params[]) => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const { startTransition } = useParamsContext();
 
   const params = {} as { [param in Params]: string | null };
   keys.forEach(key => {
@@ -28,7 +52,9 @@ export const useParams = <Params extends string>(keys: Params[]) => {
     const ps = sp.toString();
     const queryString = `${ps.length ? '?' : ''}${ps}`;
 
-    router.replace(`${pathname}${queryString}`, { scroll: false });
+    startTransition(() => {
+      router.replace(`${pathname}${queryString}`, { scroll: false });
+    });
   };
 
   return [params, setParams] as const;