From e77cce7a4b8c627ca8eda290e84aa171d50ce13d Mon Sep 17 00:00:00 2001
From: Sarah Gerrard <gerrardsarah@gmail.com>
Date: Mon, 7 Sep 2026 15:16:02 -0700
Subject: [PATCH] perf: lazy-load global login and libraries overlays

---
 src/contexts/LibrariesOverlayContext.tsx | 23 +++++++++++++++++------
 src/contexts/LoginModalContext.tsx       | 21 +++++++++++++++------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/contexts/LibrariesOverlayContext.tsx b/src/contexts/LibrariesOverlayContext.tsx
index 71dc8a760..4c91f9a60 100644
--- a/src/contexts/LibrariesOverlayContext.tsx
+++ b/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,6 +40,7 @@ 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)
@@ -42,6 +48,7 @@ export function LibrariesOverlayProvider({
   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>
   )
 }
diff --git a/src/contexts/LoginModalContext.tsx b/src/contexts/LoginModalContext.tsx
index bf7c27865..2280c6484 100644
--- a/src/contexts/LoginModalContext.tsx
+++ b/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,6 +41,7 @@ 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)
 
@@ -45,6 +49,7 @@ export function LoginModalProvider({ children }: LoginModalProviderProps) {
     (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>
   )
 }