perf: lazy-load global login and libraries overlays

src/contexts/LibrariesOverlayContext.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react'
 import { useLocation } from '@tanstack/react-router'
-import { LibrariesOverlay } from '~/components/LibrariesOverlay'
+
+const LazyLibrariesOverlay = React.lazy(() =>
+  import('~/components/LibrariesOverlay').then((m) => ({
+    default: m.LibrariesOverlay,
+  })),
+)
 
 interface LibrariesOverlayContextValue {
   openLibraries: (options?: { onBack?: () => void }) => void
@@ -35,13 +40,15 @@ export function LibrariesOverlayProvider({
   children: React.ReactNode
 }) {
   const [isOpen, setIsOpen] = React.useState(false)
+  const [hasLoadedOverlay, setHasLoadedOverlay] = React.useState(false)
   const [returnTarget, setReturnTarget] = React.useState<{
     onBack: () => void
   } | null>(null)
 
   const openLibraries = React.useCallback(
     (options?: { onBack?: () => void }) => {
       setReturnTarget(options?.onBack ? { onBack: options.onBack } : null)
+      setHasLoadedOverlay(true)
       setIsOpen(true)
     },
     [],
@@ -74,11 +81,15 @@ export function LibrariesOverlayProvider({
   return (
     <LibrariesOverlayContext.Provider value={value}>
       {children}
-      <LibrariesOverlay
-        open={isOpen}
-        onBack={returnTarget ? returnToMenu : undefined}
-        onClose={closeLibraries}
-      />
+      {hasLoadedOverlay ? (
+        <React.Suspense fallback={null}>
+          <LazyLibrariesOverlay
+            open={isOpen}
+            onBack={returnTarget ? returnToMenu : undefined}
+            onClose={closeLibraries}
+          />
+        </React.Suspense>
+      ) : null}
     </LibrariesOverlayContext.Provider>
   )
 }

src/contexts/LoginModalContext.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { LoginModal } from '~/components/LoginModal'
 import { currentUserQueryOptions } from '~/hooks/useCurrentUser'
 
+const LazyLoginModal = React.lazy(() =>
+  import('~/components/LoginModal').then((m) => ({ default: m.LoginModal })),
+)
+
 interface LoginModalContextValue {
   openLoginModal: (options?: {
     description?: string
@@ -38,13 +41,15 @@ interface LoginModalProviderProps {
 export function LoginModalProvider({ children }: LoginModalProviderProps) {
   const queryClient = useQueryClient()
   const [isOpen, setIsOpen] = React.useState(false)
+  const [hasLoadedModal, setHasLoadedModal] = React.useState(false)
   const [description, setDescription] = React.useState<string>()
   const pendingOnSuccessRef = React.useRef<(() => void) | undefined>(undefined)
 
   const openLoginModal = React.useCallback(
     (options?: { description?: string; onSuccess?: () => void }) => {
       pendingOnSuccessRef.current = options?.onSuccess
       setDescription(options?.description)
+      setHasLoadedModal(true)
       setIsOpen(true)
     },
     [],
@@ -89,11 +94,15 @@ export function LoginModalProvider({ children }: LoginModalProviderProps) {
   return (
     <LoginModalContext.Provider value={value}>
       {children}
-      <LoginModal
-        open={isOpen}
-        description={description}
-        onOpenChange={handleOpenChange}
-      />
+      {hasLoadedModal ? (
+        <React.Suspense fallback={null}>
+          <LazyLoginModal
+            open={isOpen}
+            description={description}
+            onOpenChange={handleOpenChange}
+          />
+        </React.Suspense>
+      ) : null}
     </LoginModalContext.Provider>
   )
 }