From bb5a654f8d400a9779cf75d384743baab31ae7e8 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Mon, 29 Dec 2025 16:09:17 +0800
Subject: [PATCH] refactor(web): use standardized Loader pattern for TanStack
 devtools

---
 web/app/components/devtools/index.ts          |  5 ++---
 web/app/components/devtools/tanstack/index.ts |  1 +
 .../components/devtools/tanstack/loader.tsx   | 21 +++++++++++++++++++
 web/context/query-client.tsx                  | 15 ++-----------
 4 files changed, 26 insertions(+), 16 deletions(-)
 create mode 100644 web/app/components/devtools/tanstack/loader.tsx

diff --git a/web/app/components/devtools/index.ts b/web/app/components/devtools/index.ts
index 2964b277c5..016ef4d168 100644
--- a/web/app/components/devtools/index.ts
+++ b/web/app/components/devtools/index.ts
@@ -1,3 +1,2 @@
-export { ReactScan } from './react-scan'
-export { ReactScanLoader } from './react-scan'
-export { TanStackDevtoolsWrapper } from './tanstack'
+export * from './react-scan'
+export * from './tanstack'
diff --git a/web/app/components/devtools/tanstack/index.ts b/web/app/components/devtools/tanstack/index.ts
index bad4aa8708..b73550d5c7 100644
--- a/web/app/components/devtools/tanstack/index.ts
+++ b/web/app/components/devtools/tanstack/index.ts
@@ -1 +1,2 @@
 export { TanStackDevtoolsWrapper } from './devtools'
+export { TanStackDevtoolsLoader } from './loader'
diff --git a/web/app/components/devtools/tanstack/loader.tsx b/web/app/components/devtools/tanstack/loader.tsx
new file mode 100644
index 0000000000..673ea0da90
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx
index e360cbed38..45c7f4d612 100644
--- a/web/context/query-client.tsx
+++ b/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 { IS_DEV } from '@/config'
-
-const TanStackDevtoolsWrapper = lazy(() =>
-  import('@/app/components/devtools/tanstack').then(module => ({
-    default: module.TanStackDevtoolsWrapper,
-  })),
-)
+import { TanStackDevtoolsLoader } from '@/app/components/devtools'
 
 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 && (
-        <Suspense fallback={null}>
-          <TanStackDevtoolsWrapper />
-        </Suspense>
-      )}
+      <TanStackDevtoolsLoader />
     </QueryClientProvider>
   )
 }