refactor(web): add React Scan loader

web/app/components/devtools/index.ts

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

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

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

web/app/layout.tsx

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