fix useSearchParams usage bug

apps/www/components/provider.tsx

@@ -1,22 +1,14 @@
 'use client';
 
-import React, { useEffect } from 'react';
-import { usePathname, useSearchParams } from 'next/navigation';
+import React from 'react';
 import { Toaster, Tooltip } from '@opub-cdl/ui';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import NextTopLoader from 'nextjs-toploader';
 import { SSRProvider } from 'react-aria';
 
-import { navigateEnd } from '@/lib/navigation';
+import { RouterEvents } from '@/lib/navigation';
 
 export default function Provider({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  useEffect(() => {
-    navigateEnd();
-  }, [pathname, searchParams]);
-
   const [client] = React.useState(
     new QueryClient({
       defaultOptions: {
@@ -32,6 +24,7 @@ export default function Provider({ children }: { children: React.ReactNode }) {
   return (
     <QueryClientProvider client={client}>
       <SSRProvider>
+        <RouterEvents />
         <NextTopLoader color="var(--decorative-icon-three)" />
         <Tooltip.Provider>
           {children}

apps/www/lib/navigation.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import NProgress from 'nprogress';
+
+import { useIsNavigating } from '@/config/store';
+
+export function navigateStart() {
+  NProgress.start();
+  useIsNavigating.getState().setIsNavigation(true);
+}
+
+export function navigateEnd() {
+  NProgress.done();
+  useIsNavigating.getState().setIsNavigation(false);
+}
+
+function useOnComplete() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  React.useEffect(() => navigateEnd(), [pathname, searchParams]);
+}
+
+function __RouterEvents() {
+  useOnComplete();
+  return null;
+}
+
+// https://github.com/joulev/nextjs13-appdir-router-events/blob/52e3457f183b0b638cd14c6c0e8c138e71a76895/app/router-events.tsx
+export function RouterEvents() {
+  return (
+    <React.Suspense>
+      <__RouterEvents />
+    </React.Suspense>
+  );
+}