From 379f85fcee6861165f9d83242258e7563c5bf190 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 7 Aug 2025 10:54:40 -0500 Subject: [PATCH] Only enable policy update overlay once the actual Overlay mounts (after onboarding and all that) --- .../PolicyUpdateOverlay/context.tsx | 40 +++++++++++++++---- src/components/PolicyUpdateOverlay/index.tsx | 11 +++-- .../usePolicyUpdateState.ts | 11 ++++- src/view/shell/index.tsx | 4 +- src/view/shell/index.web.tsx | 4 +- 5 files changed, 53 insertions(+), 17 deletions(-) diff --git a/src/components/PolicyUpdateOverlay/context.tsx b/src/components/PolicyUpdateOverlay/context.tsx index 68ae7bbd86..941e16eec0 100644 --- a/src/components/PolicyUpdateOverlay/context.tsx +++ b/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({ - completed: true, - complete: () => {}, +const Context = createContext<{ + state: PolicyUpdateState + 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 ( - {children} + {children} ) } diff --git a/src/components/PolicyUpdateOverlay/index.tsx b/src/components/PolicyUpdateOverlay/index.tsx index 1900dc27fd..c8bd694c43 100644 --- a/src/components/PolicyUpdateOverlay/index.tsx +++ b/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 diff --git a/src/components/PolicyUpdateOverlay/usePolicyUpdateState.ts b/src/components/PolicyUpdateOverlay/usePolicyUpdateState.ts index 29d8afe067..2ac7be96e0 100644 --- a/src/components/PolicyUpdateOverlay/usePolicyUpdateState.ts +++ b/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({ diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 0d8c245665..543009a55c 100644 --- a/src/view/shell/index.tsx +++ b/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(() => , []) const onOpenDrawer = useCallback( diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index c1565e8ee7..3c2bc58abd 100644 --- a/src/view/shell/index.web.tsx +++ b/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) {