diff --git a/src/components/ageAssurance/AgeRestrictedScreen.tsx b/src/components/ageAssurance/AgeRestrictedScreen.tsx
index 1e35c19064..f3477824fc 100644
--- a/src/components/ageAssurance/AgeRestrictedScreen.tsx
+++ b/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 || (
+
+
+
+ )
+ )
+ }, [fallback])
+
return (
<>
-
-
+
+
@@ -30,7 +47,9 @@ export function AgeRestrictedScreen({children}: {children: React.ReactNode}) {
- {children}
+
+ {children}
+
>
)
}
diff --git a/src/components/ageAssurance/IsAgeRestricted.tsx b/src/components/ageAssurance/IsAgeRestricted.tsx
index 4d0638df86..72386dcedc 100644
--- a/src/components/ageAssurance/IsAgeRestricted.tsx
+++ b/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 = {
diff --git a/src/state/ageAssurance.tsx b/src/state/ageAssurance.tsx
index e9fadb0e2d..e4bfca5cf6 100644
--- a/src/state/ageAssurance.tsx
+++ b/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,
}))(),
)