[CLEAN] Synthetic Benchmark PR #30318 - refactor(web): organize devtools components

web/app/components/devtools/react-scan/loader.tsx

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

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/app/layout.tsx

@@ -8,8 +8,8 @@ import { getLocaleOnServer } from '@/i18n-config/server'
 import { DatasetAttr } from '@/types/feature'
 import { cn } from '@/utils/classnames'
 import BrowserInitializer from './components/browser-initializer'
+import { ReactScanLoader } from './components/devtools/react-scan/loader'
 import I18nServer from './components/i18n-server'
-import { ReactScan } from './components/react-scan'
 import SentryInitializer from './components/sentry-initializer'
 import RoutePrefixHandle from './routePrefixHandle'
 import './styles/globals.css'
@@ -90,7 +90,7 @@ const LocaleLayout = async ({
         className="color-scheme h-full select-auto"
         {...datasetMap}
       >
-        <ReactScan />
+        <ReactScanLoader />
         <ThemeProvider
           attribute="data-theme"
           defaultTheme="system"

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').then(module => ({
-    default: module.TanStackDevtoolsWrapper,
-  })),
-)
+import { TanStackDevtoolsLoader } from '@/app/components/devtools/tanstack/loader'
 
 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>
   )
 }