Slightly better screen gater

src/components/ageAssurance/AgeRestrictedScreen.tsx

@@ -1,3 +1,4 @@
+import {useMemo} from 'react'
 import {View} from 'react-native'
 import {Trans} from '@lingui/macro'
 
@@ -6,11 +7,27 @@ import {IsAgeRestricted} from '#/components/ageAssurance/IsAgeRestricted'
 import * as Layout from '#/components/Layout'
 import {Text} from '#/components/Typography'
 
-export function AgeRestrictedScreen({children}: {children: React.ReactNode}) {
+export function AgeRestrictedScreen({
+  children,
+  fallback,
+}: {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}) {
+  const screenFallback = useMemo(() => {
+    return (
+      fallback || (
+        <Layout.Screen>
+          <Layout.Content />
+        </Layout.Screen>
+      )
+    )
+  }, [fallback])
+
   return (
     <>
-      <IsAgeRestricted.True>
-        <Layout.Screen testID="messagesSettingsScreen">
+      <IsAgeRestricted.True fallback={screenFallback}>
+        <Layout.Screen>
           <Layout.Header.Outer>
             <Layout.Header.BackButton />
             <Layout.Header.Content>
@@ -30,7 +47,9 @@ export function AgeRestrictedScreen({children}: {children: React.ReactNode}) {
         </Layout.Screen>
       </IsAgeRestricted.True>
 
-      <IsAgeRestricted.False>{children}</IsAgeRestricted.False>
+      <IsAgeRestricted.False fallback={screenFallback}>
+        {children}
+      </IsAgeRestricted.False>
     </>
   )
 }

src/components/ageAssurance/IsAgeRestricted.tsx

@@ -1,13 +1,37 @@
 import {useAgeAssuranceContext} from '#/state/ageAssurance'
 
-export function True({children}: {children: React.ReactNode}) {
+export function True({
+  children,
+  fallback,
+}: {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}) {
   const {isLoaded, isAgeRestricted} = useAgeAssuranceContext()
-  return isLoaded && isAgeRestricted ? children : null
+  const isDefinitelyAgeRestricted = isLoaded && isAgeRestricted
+  const notSureYet = isAgeRestricted
+  return isDefinitelyAgeRestricted
+    ? children
+    : notSureYet
+      ? fallback || null
+      : null
 }
 
-export function False({children}: {children: React.ReactNode}) {
+export function False({
+  children,
+  fallback,
+}: {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}) {
   const {isLoaded, isAgeRestricted} = useAgeAssuranceContext()
-  return isLoaded && !isAgeRestricted ? children : null
+  const isDefinitelyNotAgeRestricted = isLoaded && !isAgeRestricted
+  const notSureYet = !isAgeRestricted
+  return isDefinitelyNotAgeRestricted
+    ? children
+    : notSureYet
+      ? fallback || null
+      : null
 }
 
 export const IsAgeRestricted = {

src/state/ageAssurance.tsx

@@ -77,7 +77,7 @@ export function Provider({children}: {children: React.ReactNode}) {
           (() => ({
             data: {
               lastInitiatedAt: new Date().toISOString(),
-              status: 'assured',
+              status: 'unknown',
             } as TempAgeAssuranceState,
           }))(),
         )