Only enable policy update overlay once the actual Overlay mounts (after onboarding and all that)

src/components/PolicyUpdateOverlay/context.tsx

@@ -1,4 +1,10 @@
-import {createContext, type ReactNode, useContext} from 'react'
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
 
 import {Provider as PortalProvider} from '#/components/PolicyUpdateOverlay/Portal'
 import {
@@ -6,27 +12,45 @@ import {
   usePolicyUpdateState,
 } from '#/components/PolicyUpdateOverlay/usePolicyUpdateState'
 
-const Context = createContext<PolicyUpdateState>({
+const Context = createContext<{
-  completed: true,
+  state: PolicyUpdateState
-  complete: () => {},
+  setIsReadyToShowOverlay: () => void
+}>({
+  state: {
+    completed: true,
+    complete: () => {},
+  },
+  setIsReadyToShowOverlay: () => {},
 })
 
-export function usePolicyUpdateStateContext() {
+export function usePolicyUpdateContext() {
   const context = useContext(Context)
   if (!context) {
     throw new Error(
-      'usePolicyUpdateStateContext must be used within a PolicyUpdateProvider',
+      'usePolicyUpdateContext must be used within a PolicyUpdateProvider',
     )
   }
   return context
 }
 
 export function Provider({children}: {children?: ReactNode}) {
-  const state = usePolicyUpdateState()
+  const [isReadyToShowOverlay, setIsReadyToShowOverlay] = useState(false)
+  const state = usePolicyUpdateState({enabled: isReadyToShowOverlay})
+
+  const ctx = useMemo(
+    () => ({
+      state,
+      setIsReadyToShowOverlay() {
+        if (isReadyToShowOverlay) return
+        setIsReadyToShowOverlay(true)
+      },
+    }),
+    [state, isReadyToShowOverlay, setIsReadyToShowOverlay],
+  )
 
   return (
     <PortalProvider>
-      <Context.Provider value={state}>{children}</Context.Provider>
+      <Context.Provider value={ctx}>{children}</Context.Provider>
     </PortalProvider>
   )
 }

src/components/PolicyUpdateOverlay/index.tsx

@@ -1,18 +1,23 @@
+import {useEffect} from 'react'
 import {View} from 'react-native'
 
 import {isIOS} from '#/platform/detection'
 import {atoms as a} from '#/alf'
 import {FullWindowOverlay} from '#/components/FullWindowOverlay'
-import {usePolicyUpdateStateContext} from '#/components/PolicyUpdateOverlay/context'
+import {usePolicyUpdateContext} from '#/components/PolicyUpdateOverlay/context'
 import {Portal} from '#/components/PolicyUpdateOverlay/Portal'
 import {Content} from '#/components/PolicyUpdateOverlay/updates/202508'
 
 export {Provider} from '#/components/PolicyUpdateOverlay/context'
-export {usePolicyUpdateStateContext} from '#/components/PolicyUpdateOverlay/context'
+export {usePolicyUpdateContext} from '#/components/PolicyUpdateOverlay/context'
 export {Outlet} from '#/components/PolicyUpdateOverlay/Portal'
 
 export function PolicyUpdateOverlay() {
-  const state = usePolicyUpdateStateContext()
+  const {state, setIsReadyToShowOverlay} = usePolicyUpdateContext()
+
+  useEffect(() => {
+    setIsReadyToShowOverlay()
+  }, [setIsReadyToShowOverlay])
 
   /*
    * See `window.clearNux` example in `/state/queries/nuxs` for a way to clear

src/components/PolicyUpdateOverlay/usePolicyUpdateState.ts

@@ -11,13 +11,20 @@ export type PolicyUpdateState = {
   complete: () => void
 }
 
-export function usePolicyUpdateState() {
+export function usePolicyUpdateState({enabled}: {enabled: boolean}) {
   const nux = useNux(ACTIVE_UPDATE_ID)
   const {mutate: save, variables} = useSaveNux()
   const deviceStorage = useStorage(device, [ACTIVE_UPDATE_ID])
   const debugOverride =
     !!useStorage(device, ['policyUpdateDebugOverride'])[0] && IS_DEV
   return useMemo(() => {
+    if (!enabled) {
+      return {
+        completed: true,
+        complete() {},
+      }
+    }
+
     const nuxIsReady = nux.status === 'ready'
     const nuxIsCompleted = nux.nux?.completed === true
     const nuxIsOptimisticallyCompleted = !!variables?.completed
@@ -59,7 +66,7 @@ export function usePolicyUpdateState() {
         setCompletedForDevice(true)
       },
     }
-  }, [nux, save, variables, deviceStorage, debugOverride])
+  }, [enabled, nux, save, variables, deviceStorage, debugOverride])
 }
 
 export function computeCompletedState({

src/view/shell/index.tsx

@@ -33,7 +33,7 @@ import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {
   Outlet as PolicyUpdateOverlayPortalOutlet,
-  usePolicyUpdateStateContext,
+  usePolicyUpdateContext,
 } from '#/components/PolicyUpdateOverlay'
 import {Outlet as PortalOutlet} from '#/components/Portal'
 import {RoutesContainer, TabsNavigator} from '#/Navigation'
@@ -49,7 +49,7 @@ function ShellInner() {
   const setIsDrawerOpen = useSetDrawerOpen()
   const winDim = useWindowDimensions()
   const insets = useSafeAreaInsets()
-  const policyUpdateState = usePolicyUpdateStateContext()
+  const {state: policyUpdateState} = usePolicyUpdateContext()
 
   const renderDrawerContent = useCallback(() => <DrawerContent />, [])
   const onOpenDrawer = useCallback(

src/view/shell/index.web.tsx

@@ -24,7 +24,7 @@ import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {
   Outlet as PolicyUpdateOverlayPortalOutlet,
-  usePolicyUpdateStateContext,
+  usePolicyUpdateContext,
 } from '#/components/PolicyUpdateOverlay'
 import {Outlet as PortalOutlet} from '#/components/Portal'
 import {FlatNavigator, RoutesContainer} from '#/Navigation'
@@ -41,7 +41,7 @@ function ShellInner() {
   const {_} = useLingui()
   const showDrawer = !isDesktop && isDrawerOpen
   const [showDrawerDelayedExit, setShowDrawerDelayedExit] = useState(showDrawer)
-  const policyUpdateState = usePolicyUpdateStateContext()
+  const {state: policyUpdateState} = usePolicyUpdateContext()
 
   useLayoutEffect(() => {
     if (showDrawer !== showDrawerDelayedExit) {