fix: delay search

Author: tannerlinsley

package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
+    "@sentry/browser": "^10.43.0",
     "@sentry/node": "^10.42.0",
     "@sentry/tanstackstart-react": "^10.43.0",
     "@stackblitz/sdk": "^1.11.0",

pnpm-lock.yaml

@@ -4,7 +4,8 @@ import { useToast } from '~/components/ToastProvider'
 import { Copy } from 'lucide-react'
 import type { Mermaid } from 'mermaid'
 import { transformerNotationDiff } from '@shikijs/transformers'
-import { createHighlighter, type HighlighterGeneric } from 'shiki'
+import type { HighlighterGeneric } from 'shiki'
+import { createHighlighter } from 'shiki'
 import { Button } from '~/ui'
 
 // Language aliases mapping

src/components/markdown/CodeBlock.tsx

@@ -6,10 +6,45 @@ import { NotFound } from './components/NotFound'
 import { QueryClient } from '@tanstack/react-query'
 import * as Sentry from '@sentry/tanstackstart-react'
 
+function deferSentryReplayIntegration() {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const loadReplay = async () => {
+    try {
+      const client = Sentry.getClient()
+
+      if (client?.getIntegrationByName('Replay')) {
+        return
+      }
+
+      const { replayIntegration } = await import('@sentry/browser')
+
+      Sentry.getClient()?.addIntegration(replayIntegration())
+    } catch {
+      // Ignore replay load failures and preserve core error reporting.
+    }
+  }
+
+  if ('requestIdleCallback' in window) {
+    window.requestIdleCallback(
+      () => {
+        void loadReplay()
+      },
+      { timeout: 2500 },
+    )
+    return
+  }
+
+  globalThis.setTimeout(() => {
+    void loadReplay()
+  }, 2500)
+}
+
 if (typeof document !== 'undefined') {
   Sentry.init({
     dsn: 'https://ac4bfc43ff4a892f8dc7053c4a50d92f@o4507236158537728.ingest.us.sentry.io/4507236163649536',
-    integrations: [Sentry.replayIntegration()],
     sendDefaultPii: true,
     // Performance Monitoring
     tracesSampleRate: 1.0, //  Capture 100% of the transactions
@@ -19,6 +54,8 @@ if (typeof document !== 'undefined') {
     replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
     replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
   })
+
+  deferSentryReplayIntegration()
 }
 
 export function getRouter() {

src/router.tsx

@@ -19,9 +19,12 @@ const LazyRouterDevtools = React.lazy(() =>
 import { NotFound } from '~/components/NotFound'
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { SearchProvider, useSearchContext } from '~/contexts/SearchContext'
-import { SearchModal } from '~/components/SearchModal'
 import { ToastProvider } from '~/components/ToastProvider'
 import { LoginModalProvider } from '~/contexts/LoginModalContext'
+
+const LazySearchModal = React.lazy(() =>
+  import('~/components/SearchModal').then((m) => ({ default: m.SearchModal })),
+)
 import { Spinner } from '~/components/Spinner'
 import { ThemeProvider, useHtmlClass } from '~/components/ThemeProvider'
 import { Navbar } from '~/components/Navbar'
@@ -207,7 +210,8 @@ function ShellComponent({ children }: { children: React.ReactNode }) {
 }
 
 function SearchHotkeyController() {
-  const { openSearch } = useSearchContext()
+  const { isOpen, openSearch } = useSearchContext()
+  const [hasOpenedSearch, setHasOpenedSearch] = React.useState(false)
 
   React.useEffect(() => {
     const handleGlobalKeyDown = (event: KeyboardEvent) => {
@@ -216,6 +220,7 @@ function SearchHotkeyController() {
       if (event.key.toLowerCase() !== 'k') return
 
       event.preventDefault()
+      setHasOpenedSearch(true)
       openSearch()
     }
 
@@ -225,7 +230,19 @@ function SearchHotkeyController() {
     }
   }, [openSearch])
 
-  return <SearchModal />
+  React.useEffect(() => {
+    if (isOpen) {
+      setHasOpenedSearch(true)
+    }
+  }, [isOpen])
+
+  if (!hasOpenedSearch) return null
+
+  return (
+    <React.Suspense fallback={null}>
+      <LazySearchModal />
+    </React.Suspense>
+  )
 }
 
 function IdleGtmLoader() {

src/routes/__root.tsx

@@ -63,14 +63,6 @@ export default defineConfig({
         manualChunks: (id) => {
           // Vendor chunk splitting for better caching
           if (id.includes('node_modules')) {
-            // Search-related deps (only loaded when search modal opens)
-            if (
-              id.includes('algoliasearch') ||
-              id.includes('instantsearch') ||
-              id.includes('react-instantsearch')
-            ) {
-              return 'search'
-            }
             // Lucide icons (tree-shaken but still significant)
             if (id.includes('lucide-react')) {
               return 'icons'