REF: Lazy Load wallet export

Navigation.tsx

@@ -22,7 +22,6 @@ import ReleaseNotes from './screen/settings/releasenotes';
 import Tools from './screen/settings/tools';
 import WalletAddresses from './screen/wallets/addresses';
 import WalletDetails from './screen/wallets/details';
-import WalletExport from './screen/wallets/export';
 import ExportMultisigCoordinationSetup from './screen/wallets/ExportMultisigCoordinationSetup';
 import GenerateWord from './screen/wallets/generateWord';
 import WalletsList from './screen/wallets/WalletsList';
@@ -77,6 +76,7 @@ import PaymentCodesList from './screen/wallets/paymentCodesList';
 import { BlueStorageContext } from './blue_modules/storage-context';
 import { useIsLargeScreen } from './hooks/useIsLargeScreen';
 import { HeaderRightButton } from './components/HeaderRightButton';
+import WalletExportStack from './navigation/WalletExportStack';
 
 // CreateTransactionStackNavigator === SendDetailsStack
 const SendDetailsStack = createNativeStackNavigator();
@@ -298,21 +298,6 @@ const SignVerifyStackRoot = () => {
   );
 };
 
-const WalletExportStack = createNativeStackNavigator();
-const WalletExportStackRoot = () => {
-  const theme = useTheme();
-
-  return (
-    <WalletExportStack.Navigator
-      id="WalletExportRoot"
-      screenOptions={{ headerShadowVisible: false, statusBarStyle: 'light' }}
-      initialRouteName="WalletExport"
-    >
-      <WalletExportStack.Screen name="WalletExport" component={WalletExport} options={WalletExport.navigationOptions(theme)} />
-    </WalletExportStack.Navigator>
-  );
-};
-
 const DetailViewRoot = createNativeStackNavigator();
 const DetailViewStackScreensStack = () => {
   const { walletsInitialized } = useContext(BlueStorageContext);
@@ -475,7 +460,7 @@ const DetailViewStackScreensStack = () => {
           {/* screens */}
           <DetailViewRoot.Screen
             name="WalletExportRoot"
-            component={WalletExportStackRoot}
+            component={WalletExportStack}
             options={{ ...NavigationDefaultOptions, ...StatusBarLightOptions }}
           />
           <DetailViewRoot.Screen
@@ -595,13 +580,13 @@ const PaymentCodeStackRoot = () => {
   );
 };
 
-const NavigationDefaultOptions: NativeStackNavigationOptions = { headerShown: false, presentation: 'modal' };
-const NavigationFormModalOptions: NativeStackNavigationOptions = {
+export const NavigationDefaultOptions: NativeStackNavigationOptions = { headerShown: false, presentation: 'modal' };
+export const NavigationFormModalOptions: NativeStackNavigationOptions = {
   headerShown: false,
   presentation: 'formSheet',
 };
-const NavigationDefaultOptionsForDesktop: NativeStackNavigationOptions = { headerShown: false, presentation: 'fullScreenModal' };
-const StatusBarLightOptions: NativeStackNavigationOptions = { statusBarStyle: 'light' };
+export const NavigationDefaultOptionsForDesktop: NativeStackNavigationOptions = { headerShown: false, presentation: 'fullScreenModal' };
+export const StatusBarLightOptions: NativeStackNavigationOptions = { statusBarStyle: 'light' };
 
 const MainRoot = () => {
   return isHandset ? <DetailViewStackScreensStack /> : <DrawerRoot />;

navigation/LazyLoadAddWalletStack.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from 'react';
-import { View, ActivityIndicator, StyleSheet } from 'react-native';
+import { LazyLoadingIndicator } from './LazyLoadingIndicator';
 
 // Define lazy imports
 const WalletsAdd = lazy(() => import('../screen/wallets/Add'));
@@ -15,84 +15,74 @@ const WalletsAddMultisig = lazy(() => import('../screen/wallets/addMultisig'));
 const WalletsAddMultisigStep2 = lazy(() => import('../screen/wallets/addMultisigStep2'));
 const WalletsAddMultisigHelp = lazy(() => import('../screen/wallets/addMultisigHelp'));
 
-const LoadingIndicator = () => (
-  <View style={styles.root}>
-    <ActivityIndicator size="large" />
-  </View>
-);
-
 export const AddComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <WalletsAdd />
   </Suspense>
 );
 
 export const ImportWalletDiscoveryComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <ImportWalletDiscovery />
   </Suspense>
 );
 
 export const ImportCustomDerivationPathComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <ImportCustomDerivationPath />
   </Suspense>
 );
 
 export const ImportWalletComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <ImportWallet />
   </Suspense>
 );
 
 export const ImportSpeedComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <ImportSpeed />
   </Suspense>
 );
 
 export const PleaseBackupComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <PleaseBackup />
   </Suspense>
 );
 
 export const PleaseBackupLNDHubComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <PleaseBackupLNDHub />
   </Suspense>
 );
 
 export const PleaseBackupLdkComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <PleaseBackupLdk />
   </Suspense>
 );
 
 export const ProvideEntropyComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <ProvideEntropy />
   </Suspense>
 );
 
 export const WalletsAddMultisigComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <WalletsAddMultisig />
   </Suspense>
 );
 
 export const WalletsAddMultisigStep2Component = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <WalletsAddMultisigStep2 />
   </Suspense>
 );
 
 export const WalletsAddMultisigHelpComponent = () => (
-  <Suspense fallback={<LoadingIndicator />}>
+  <Suspense fallback={<LazyLoadingIndicator />}>
     <WalletsAddMultisigHelp />
   </Suspense>
 );
-
-const styles = StyleSheet.create({
-  root: { flex: 1, justifyContent: 'center', alignItems: 'center' },
-});

navigation/LazyLoadWalletExportStack.tsx

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+import { LazyLoadingIndicator } from './LazyLoadingIndicator';
+
+// Define lazy imports
+const WalletExport = lazy(() => import('../screen/wallets/export'));
+
+export const WalletExportComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <WalletExport />
+  </Suspense>
+);

navigation/LazyLoadingIndicator.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+
+export const LazyLoadingIndicator = () => (
+  <View style={styles.root}>
+    <ActivityIndicator size="large" />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  root: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});

navigation/WalletExportStack.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { WalletExportComponent } from './LazyLoadWalletExportStack';
+import navigationStyle from '../components/navigationStyle';
+import { useTheme } from '../components/themes';
+import loc from '../loc';
+
+export type WalletExportStackParamList = {
+  WalletExport: { walletID: string };
+};
+
+const Stack = createNativeStackNavigator<WalletExportStackParamList>();
+
+const WalletExportStack = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="WalletExport"
+        component={WalletExportComponent}
+        options={navigationStyle({
+          closeButton: true,
+          headerBackVisible: false,
+          title: loc.wallets.export_title,
+        })(theme)}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default WalletExportStack;

screen/wallets/export.js

@@ -2,7 +2,6 @@ import React, { useState, useCallback, useContext, useRef, useEffect } from 'rea
 import { InteractionManager, ScrollView, ActivityIndicator, View, StyleSheet, AppState } from 'react-native';
 import { useNavigation, useFocusEffect, useRoute } from '@react-navigation/native';
 import { BlueSpacing20, BlueText, BlueCard } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import { LegacyWallet, LightningCustodianWallet, SegwitBech32Wallet, SegwitP2SHWallet, WatchOnlyWallet } from '../../class';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -155,13 +154,4 @@ const styles = StyleSheet.create({
   },
 });
 
-WalletExport.navigationOptions = navigationStyle(
-  {
-    closeButton: true,
-    headerBackVisible: false,
-    statusBarStyle: 'light',
-  },
-  opts => ({ ...opts, title: loc.wallets.export_title }),
-);
-
 export default WalletExport;