From 4f6ff6fc739ea3323c92faa38293463eb6c32f4e Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 6 Jan 2026 18:03:21 +0200
Subject: [PATCH] lazy load storybook (#9612)

---
 src/Navigation.tsx                       |   4 +-
 src/view/screens/Storybook/Forms.tsx     |  37 ++----
 src/view/screens/Storybook/Storybook.tsx | 148 +++++++++++++++++++++
 src/view/screens/Storybook/index.tsx     | 156 +----------------------
 4 files changed, 168 insertions(+), 177 deletions(-)
 create mode 100644 src/view/screens/Storybook/Storybook.tsx

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index bf43eec6f1..fde223bd06 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -68,7 +68,7 @@ import {PostThreadScreen} from '#/view/screens/PostThread'
 import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
 import {ProfileScreen} from '#/view/screens/Profile'
 import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
-import {Storybook} from '#/view/screens/Storybook'
+import {StorybookScreen} from '#/view/screens/Storybook'
 import {SupportScreen} from '#/view/screens/Support'
 import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
 import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
@@ -304,7 +304,7 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
       />
       <Stack.Screen
         name="Debug"
-        getComponent={() => Storybook}
+        getComponent={() => StorybookScreen}
         options={{title: title(msg`Storybook`), requireAuth: true}}
       />
       <Stack.Screen
diff --git a/src/view/screens/Storybook/Forms.tsx b/src/view/screens/Storybook/Forms.tsx
index ee859a8275..ccfbe88698 100644
--- a/src/view/screens/Storybook/Forms.tsx
+++ b/src/view/screens/Storybook/Forms.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import {type TextInput, View} from 'react-native'
 
 import {APP_LANGUAGES} from '#/lib/../locale/languages'
+import {type CountryCode} from '#/lib/international-telephone-codes'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DateField, LabelText} from '#/components/forms/DateField'
@@ -25,7 +26,7 @@ export function Forms() {
 
   const [value, setValue] = React.useState('')
   const [date, setDate] = React.useState('2001-01-01')
-  const [countryCode, setCountryCode] = React.useState('US')
+  const [countryCode, setCountryCode] = React.useState<CountryCode>('US')
   const [phoneNumber, setPhoneNumber] = React.useState('')
   const [lang, setLang] = React.useState('en')
 
@@ -55,24 +56,6 @@ export function Forms() {
         />
       </Select.Root>
 
-      <View style={[a.flex_row, a.gap_sm, a.align_center]}>
-        <View>
-          <InternationalPhoneCodeSelect
-            // @ts-ignore
-            value={countryCode}
-            onChange={value => setCountryCode(value)}
-          />
-        </View>
-
-        <View style={[a.flex_1]}>
-          <TextField.Input
-            label="Phone number"
-            value={phoneNumber}
-            onChangeText={setPhoneNumber}
-          />
-        </View>
-      </View>
-
       <View style={[a.gap_md, a.align_start, a.w_full]}>
         <H3>InputText</H3>
 
@@ -163,21 +146,23 @@ export function Forms() {
             label="Input"
           />
         </View>
-
-        {/* commented out so it's not in the web bundle */}
-        {/*<H3>InternationalPhoneCodeSelect</H3>
+        <H3>InternationalPhoneCodeSelect</H3>
 
         <View style={[a.flex_row, a.gap_sm, a.align_center]}>
           <View>
             <InternationalPhoneCodeSelect
-              value={telCode}
-              onChange={setTelCode}
+              value={countryCode}
+              onChange={value => setCountryCode(value)}
             />
           </View>
           <View style={[a.flex_1]}>
-            <TextField.Input label="Phone number" />
+            <TextField.Input
+              label="Phone number"
+              value={phoneNumber}
+              onChangeText={setPhoneNumber}
+            />
           </View>
-        </View>*/}
+        </View>
       </View>
 
       <View style={[a.gap_md, a.align_start, a.w_full]}>
diff --git a/src/view/screens/Storybook/Storybook.tsx b/src/view/screens/Storybook/Storybook.tsx
new file mode 100644
index 0000000000..ee7892fa83
--- /dev/null
+++ b/src/view/screens/Storybook/Storybook.tsx
@@ -0,0 +1,148 @@
+import React from 'react'
+import {View} from 'react-native'
+import {useNavigation} from '@react-navigation/native'
+
+import {type NavigationProp} from '#/lib/routes/types'
+import {useSetThemePrefs} from '#/state/shell'
+import {ListContained} from '#/view/screens/Storybook/ListContained'
+import {atoms as a, ThemeProvider} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import {
+  useDeviceGeolocationApi,
+  useRequestDeviceGeolocation,
+} from '#/geolocation'
+import {Admonitions} from './Admonitions'
+import {Breakpoints} from './Breakpoints'
+import {Buttons} from './Buttons'
+import {Dialogs} from './Dialogs'
+import {Forms} from './Forms'
+import {Icons} from './Icons'
+import {Links} from './Links'
+import {Menus} from './Menus'
+import {Settings} from './Settings'
+import {Shadows} from './Shadows'
+import {Spacing} from './Spacing'
+import {Theming} from './Theming'
+import {Toasts} from './Toasts'
+import {Typography} from './Typography'
+
+export default function Storybook() {
+  const {setColorMode, setDarkTheme} = useSetThemePrefs()
+  const [showContainedList, setShowContainedList] = React.useState(false)
+  const navigation = useNavigation<NavigationProp>()
+  const requestDeviceGeolocation = useRequestDeviceGeolocation()
+  const {setDeviceGeolocation} = useDeviceGeolocationApi()
+
+  return (
+    <>
+      <View style={[a.p_xl, a.gap_5xl, {paddingBottom: 100}]}>
+        {!showContainedList ? (
+          <>
+            <View style={[a.flex_row, a.align_start, a.gap_md]}>
+              <Button
+                color="primary"
+                size="small"
+                label='Set theme to "system"'
+                onPress={() => setColorMode('system')}>
+                <ButtonText>System</ButtonText>
+              </Button>
+              <Button
+                color="secondary"
+                size="small"
+                label='Set theme to "light"'
+                onPress={() => setColorMode('light')}>
+                <ButtonText>Light</ButtonText>
+              </Button>
+              <Button
+                color="secondary"
+                size="small"
+                label='Set theme to "dim"'
+                onPress={() => {
+                  setColorMode('dark')
+                  setDarkTheme('dim')
+                }}>
+                <ButtonText>Dim</ButtonText>
+              </Button>
+              <Button
+                color="secondary"
+                size="small"
+                label='Set theme to "dark"'
+                onPress={() => {
+                  setColorMode('dark')
+                  setDarkTheme('dark')
+                }}>
+                <ButtonText>Dark</ButtonText>
+              </Button>
+            </View>
+
+            <Button
+              color="primary"
+              size="small"
+              onPress={() => navigation.navigate('SharedPreferencesTester')}
+              label="two"
+              testID="sharedPrefsTestOpenBtn">
+              <ButtonText>Open Shared Prefs Tester</ButtonText>
+            </Button>
+            <Button
+              color="primary_subtle"
+              size="large"
+              onPress={() =>
+                requestDeviceGeolocation().then(req => {
+                  if (req.granted && req.location) {
+                    setDeviceGeolocation(req.location)
+                  }
+                })
+              }
+              label="crash">
+              <ButtonText>Get GPS Location</ButtonText>
+            </Button>
+
+            <ThemeProvider theme="light">
+              <Theming />
+            </ThemeProvider>
+            <ThemeProvider theme="dim">
+              <Theming />
+            </ThemeProvider>
+            <ThemeProvider theme="dark">
+              <Theming />
+            </ThemeProvider>
+
+            <Toasts />
+            <Buttons />
+            <Forms />
+            <Typography />
+            <Spacing />
+            <Shadows />
+            <Icons />
+            <Links />
+            <Dialogs />
+            <Menus />
+            <Breakpoints />
+            <Dialogs />
+            <Admonitions />
+            <Settings />
+
+            <Button
+              color="primary"
+              size="large"
+              label="Switch to Contained List"
+              onPress={() => setShowContainedList(true)}>
+              <ButtonText>Switch to Contained List</ButtonText>
+            </Button>
+          </>
+        ) : (
+          <>
+            <Button
+              color="primary"
+              size="large"
+              label="Switch to Storybook"
+              onPress={() => setShowContainedList(false)}>
+              <ButtonText>Switch to Storybook</ButtonText>
+            </Button>
+            <ListContained />
+          </>
+        )}
+      </View>
+    </>
+  )
+}
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
index e8c972c667..2bccb75e9c 100644
--- a/src/view/screens/Storybook/index.tsx
+++ b/src/view/screens/Storybook/index.tsx
@@ -1,33 +1,10 @@
-import React from 'react'
-import {View} from 'react-native'
-import {useNavigation} from '@react-navigation/native'
+import {lazy, Suspense} from 'react'
 
-import {type NavigationProp} from '#/lib/routes/types'
-import {useSetThemePrefs} from '#/state/shell'
-import {ListContained} from '#/view/screens/Storybook/ListContained'
-import {atoms as a, ThemeProvider} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
 import * as Layout from '#/components/Layout'
-import {
-  useDeviceGeolocationApi,
-  useRequestDeviceGeolocation,
-} from '#/geolocation'
-import {Admonitions} from './Admonitions'
-import {Breakpoints} from './Breakpoints'
-import {Buttons} from './Buttons'
-import {Dialogs} from './Dialogs'
-import {Forms} from './Forms'
-import {Icons} from './Icons'
-import {Links} from './Links'
-import {Menus} from './Menus'
-import {Settings} from './Settings'
-import {Shadows} from './Shadows'
-import {Spacing} from './Spacing'
-import {Theming} from './Theming'
-import {Toasts} from './Toasts'
-import {Typography} from './Typography'
 
-export function Storybook() {
+const Storybook = lazy(() => import('./Storybook'))
+
+export function StorybookScreen() {
   return (
     <Layout.Screen>
       <Layout.Header.Outer>
@@ -38,129 +15,10 @@ export function Storybook() {
         <Layout.Header.Slot />
       </Layout.Header.Outer>
       <Layout.Content keyboardShouldPersistTaps="handled">
-        <StorybookInner />
+        <Suspense fallback={null}>
+          <Storybook />
+        </Suspense>
       </Layout.Content>
     </Layout.Screen>
   )
 }
-
-function StorybookInner() {
-  const {setColorMode, setDarkTheme} = useSetThemePrefs()
-  const [showContainedList, setShowContainedList] = React.useState(false)
-  const navigation = useNavigation<NavigationProp>()
-  const requestDeviceGeolocation = useRequestDeviceGeolocation()
-  const {setDeviceGeolocation} = useDeviceGeolocationApi()
-
-  return (
-    <>
-      <View style={[a.p_xl, a.gap_5xl, {paddingBottom: 100}]}>
-        {!showContainedList ? (
-          <>
-            <View style={[a.flex_row, a.align_start, a.gap_md]}>
-              <Button
-                color="primary"
-                size="small"
-                label='Set theme to "system"'
-                onPress={() => setColorMode('system')}>
-                <ButtonText>System</ButtonText>
-              </Button>
-              <Button
-                color="secondary"
-                size="small"
-                label='Set theme to "light"'
-                onPress={() => setColorMode('light')}>
-                <ButtonText>Light</ButtonText>
-              </Button>
-              <Button
-                color="secondary"
-                size="small"
-                label='Set theme to "dim"'
-                onPress={() => {
-                  setColorMode('dark')
-                  setDarkTheme('dim')
-                }}>
-                <ButtonText>Dim</ButtonText>
-              </Button>
-              <Button
-                color="secondary"
-                size="small"
-                label='Set theme to "dark"'
-                onPress={() => {
-                  setColorMode('dark')
-                  setDarkTheme('dark')
-                }}>
-                <ButtonText>Dark</ButtonText>
-              </Button>
-            </View>
-
-            <Button
-              color="primary"
-              size="small"
-              onPress={() => navigation.navigate('SharedPreferencesTester')}
-              label="two"
-              testID="sharedPrefsTestOpenBtn">
-              <ButtonText>Open Shared Prefs Tester</ButtonText>
-            </Button>
-            <Button
-              color="primary_subtle"
-              size="large"
-              onPress={() =>
-                requestDeviceGeolocation().then(req => {
-                  if (req.granted && req.location) {
-                    setDeviceGeolocation(req.location)
-                  }
-                })
-              }
-              label="crash">
-              <ButtonText>Get GPS Location</ButtonText>
-            </Button>
-
-            <ThemeProvider theme="light">
-              <Theming />
-            </ThemeProvider>
-            <ThemeProvider theme="dim">
-              <Theming />
-            </ThemeProvider>
-            <ThemeProvider theme="dark">
-              <Theming />
-            </ThemeProvider>
-
-            <Toasts />
-            <Buttons />
-            <Forms />
-            <Typography />
-            <Spacing />
-            <Shadows />
-            <Icons />
-            <Links />
-            <Dialogs />
-            <Menus />
-            <Breakpoints />
-            <Dialogs />
-            <Admonitions />
-            <Settings />
-
-            <Button
-              color="primary"
-              size="large"
-              label="Switch to Contained List"
-              onPress={() => setShowContainedList(true)}>
-              <ButtonText>Switch to Contained List</ButtonText>
-            </Button>
-          </>
-        ) : (
-          <>
-            <Button
-              color="primary"
-              size="large"
-              label="Switch to Storybook"
-              onPress={() => setShowContainedList(false)}>
-              <ButtonText>Switch to Storybook</ButtonText>
-            </Button>
-            <ListContained />
-          </>
-        )}
-      </View>
-    </>
-  )
-}