refactor(web): use standardized Loader pattern for TanStack devtools

web/app/components/devtools/index.ts

@@ -1,3 +1,2 @@
-export { ReactScan } from './react-scan'
+export * from './react-scan'
-export { ReactScanLoader } from './react-scan'
+export * from './tanstack'
-export { TanStackDevtoolsWrapper } from './tanstack'

web/app/components/devtools/tanstack/index.ts

@@ -1 +1,2 @@
 export { TanStackDevtoolsWrapper } from './devtools'
+export { TanStackDevtoolsLoader } from './loader'

web/app/components/devtools/tanstack/loader.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { lazy, Suspense } from 'react'
+import { IS_DEV } from '@/config'
+
+const TanStackDevtoolsWrapper = lazy(() =>
+  import('./devtools').then(module => ({
+    default: module.TanStackDevtoolsWrapper,
+  })),
+)
+
+export const TanStackDevtoolsLoader = () => {
+  if (!IS_DEV)
+    return null
+
+  return (
+    <Suspense fallback={null}>
+      <TanStackDevtoolsWrapper />
+    </Suspense>
+  )
+}

web/context/query-client.tsx

@@ -2,14 +2,7 @@
 
 import type { FC, PropsWithChildren } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { lazy, Suspense } from 'react'
+import { TanStackDevtoolsLoader } from '@/app/components/devtools'
-import { IS_DEV } from '@/config'
-
-const TanStackDevtoolsWrapper = lazy(() =>
-  import('@/app/components/devtools/tanstack').then(module => ({
-    default: module.TanStackDevtoolsWrapper,
-  })),
-)
 
 const STALE_TIME = 1000 * 60 * 30 // 30 minutes
 
@@ -26,11 +19,7 @@ export const TanstackQueryInitializer: FC<PropsWithChildren> = (props) => {
   return (
     <QueryClientProvider client={client}>
       {children}
-      {IS_DEV && (
+      <TanStackDevtoolsLoader />
-        <Suspense fallback={null}>
-          <TanStackDevtoolsWrapper />
-        </Suspense>
-      )}
     </QueryClientProvider>
   )
 }