From eb50d02769f130c307126bcaf2e96e0d9d3cbb91 Mon Sep 17 00:00:00 2001
From: Marcos Rodriguez Velez <marcospr@pm.me>
Date: Wed, 8 May 2024 21:24:30 -0400
Subject: [PATCH] REF: LNDCreateInvoiceComponent lazy load

---
 Navigation.tsx                                | 49 +++++----------
 navigation/LNDCreateInvoiceStack.tsx          | 61 +++++++++++++++++++
 navigation/LazyLoadLNDCreateInvoiceStack.tsx  | 38 ++++++++++++
 screen/lnd/lndCreateInvoice.js                |  9 ---
 .../lndViewAdditionalInvoiceInformation.js    |  6 --
 .../lnd/lndViewAdditionalInvoicePreImage.js   |  3 -
 screen/lnd/lndViewInvoice.js                  | 12 ----
 7 files changed, 113 insertions(+), 65 deletions(-)
 create mode 100644 navigation/LNDCreateInvoiceStack.tsx
 create mode 100644 navigation/LazyLoadLNDCreateInvoiceStack.tsx

diff --git a/Navigation.tsx b/Navigation.tsx
index a88ffb692..211e10c03 100644
--- a/Navigation.tsx
+++ b/Navigation.tsx
@@ -53,7 +53,6 @@ import { useTheme } from './components/themes';
 import loc from './loc';
 import LdkInfo from './screen/lnd/ldkInfo';
 import LdkOpenChannel from './screen/lnd/ldkOpenChannel';
-import LNDCreateInvoice from './screen/lnd/lndCreateInvoice';
 import LNDViewAdditionalInvoiceInformation from './screen/lnd/lndViewAdditionalInvoiceInformation';
 import LNDViewAdditionalInvoicePreImage from './screen/lnd/lndViewAdditionalInvoicePreImage';
 import LNDViewInvoice from './screen/lnd/lndViewInvoice';
@@ -71,37 +70,7 @@ import { useIsLargeScreen } from './hooks/useIsLargeScreen';
 import { HeaderRightButton } from './components/HeaderRightButton';
 import WalletExportStack from './navigation/WalletExportStack';
 import SendDetailsStack from './navigation/SendDetailsStack';
-
-const LNDCreateInvoiceStack = createNativeStackNavigator();
-const LNDCreateInvoiceRoot = () => {
-  const theme = useTheme();
-
-  return (
-    <LNDCreateInvoiceStack.Navigator screenOptions={{ headerShadowVisible: false }}>
-      <LNDCreateInvoiceStack.Screen
-        name="LNDCreateInvoice"
-        component={LNDCreateInvoice}
-        options={LNDCreateInvoice.navigationOptions(theme)}
-      />
-      <LNDCreateInvoiceStack.Screen
-        name="SelectWallet"
-        component={SelectWallet}
-        options={navigationStyle({ title: loc.wallets.select_wallet })(theme)}
-      />
-      <LNDCreateInvoiceStack.Screen name="LNDViewInvoice" component={LNDViewInvoice} options={LNDViewInvoice.navigationOptions(theme)} />
-      <LNDCreateInvoiceStack.Screen
-        name="LNDViewAdditionalInvoiceInformation"
-        component={LNDViewAdditionalInvoiceInformation}
-        options={LNDViewAdditionalInvoiceInformation.navigationOptions(theme)}
-      />
-      <LNDCreateInvoiceStack.Screen
-        name="LNDViewAdditionalInvoicePreImage"
-        component={LNDViewAdditionalInvoicePreImage}
-        options={LNDViewAdditionalInvoicePreImage.navigationOptions(theme)}
-      />
-    </LNDCreateInvoiceStack.Navigator>
-  );
-};
+import LNDCreateInvoiceRoot from './navigation/LNDCreateInvoiceStack';
 
 // LightningScanInvoiceStackNavigator === ScanLndInvoiceStack
 const ScanLndInvoiceStack = createNativeStackNavigator();
@@ -386,16 +355,26 @@ const DetailViewStackScreensStack = () => {
             options={navigationStyle({ headerLargeTitle: true, title: loc.settings.privacy })(theme)}
           />
           <DetailViewRoot.Screen name="Tools" component={Tools} options={Tools.navigationOptions(theme)} />
-          <DetailViewRoot.Screen name="LNDViewInvoice" component={LNDViewInvoice} options={LNDViewInvoice.navigationOptions(theme)} />
+          <DetailViewRoot.Screen
+            name="LNDViewInvoice"
+            component={LNDViewInvoice}
+            options={navigationStyle({
+              statusBarStyle: 'auto',
+              headerTitle: loc.lndViewInvoice.lightning_invoice,
+              headerStyle: {
+                backgroundColor: theme.colors.customHeader,
+              },
+            })(theme)}
+          />
           <DetailViewRoot.Screen
             name="LNDViewAdditionalInvoiceInformation"
             component={LNDViewAdditionalInvoiceInformation}
-            options={LNDViewAdditionalInvoiceInformation.navigationOptions(theme)}
+            options={navigationStyle({ title: loc.lndViewInvoice.additional_info })(theme)}
           />
           <DetailViewRoot.Screen
             name="LNDViewAdditionalInvoicePreImage"
             component={LNDViewAdditionalInvoicePreImage}
-            options={LNDViewAdditionalInvoicePreImage.navigationOptions(theme)}
+            options={navigationStyle({ title: loc.lndViewInvoice.additional_info })(theme)}
           />
 
           <DetailViewRoot.Screen
diff --git a/navigation/LNDCreateInvoiceStack.tsx b/navigation/LNDCreateInvoiceStack.tsx
new file mode 100644
index 000000000..27d6cb3db
--- /dev/null
+++ b/navigation/LNDCreateInvoiceStack.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {
+  LNDCreateInvoiceComponent,
+  SelectWalletComponent,
+  LNDViewInvoiceComponent,
+  LNDViewAdditionalInvoiceInformationComponent,
+  LNDViewAdditionalInvoicePreImageComponent,
+} from './LazyLoadLNDCreateInvoiceStack';
+import { useTheme } from '../components/themes';
+import navigationStyle from '../components/navigationStyle';
+import loc from '../loc';
+
+const Stack = createNativeStackNavigator();
+
+const LNDCreateInvoiceRoot = () => {
+  const theme = useTheme();
+
+  return (
+    <Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
+      <Stack.Screen
+        name="LNDCreateInvoice"
+        component={LNDCreateInvoiceComponent}
+        options={navigationStyle({
+          title: loc.receive.header,
+          closeButton: true,
+          headerBackVisible: false,
+          statusBarStyle: 'light',
+        })(theme)}
+      />
+      <Stack.Screen
+        name="SelectWallet"
+        component={SelectWalletComponent}
+        options={navigationStyle({ title: loc.wallets.select_wallet })(theme)}
+      />
+      <Stack.Screen
+        name="LNDViewInvoice"
+        component={LNDViewInvoiceComponent}
+        options={navigationStyle({
+          statusBarStyle: 'auto',
+          headerTitle: loc.lndViewInvoice.lightning_invoice,
+          headerStyle: {
+            backgroundColor: theme.colors.customHeader,
+          },
+        })(theme)}
+      />
+      <Stack.Screen
+        name="LNDViewAdditionalInvoiceInformation"
+        component={LNDViewAdditionalInvoiceInformationComponent}
+        options={navigationStyle({ title: loc.lndViewInvoice.additional_info })(theme)}
+      />
+      <Stack.Screen
+        name="LNDViewAdditionalInvoicePreImage"
+        component={LNDViewAdditionalInvoicePreImageComponent}
+        options={navigationStyle({ title: loc.lndViewInvoice.additional_info })(theme)}
+      />
+    </Stack.Navigator>
+  );
+};
+
+export default LNDCreateInvoiceRoot;
diff --git a/navigation/LazyLoadLNDCreateInvoiceStack.tsx b/navigation/LazyLoadLNDCreateInvoiceStack.tsx
new file mode 100644
index 000000000..1f23d293e
--- /dev/null
+++ b/navigation/LazyLoadLNDCreateInvoiceStack.tsx
@@ -0,0 +1,38 @@
+import React, { lazy, Suspense } from 'react';
+import { LazyLoadingIndicator } from './LazyLoadingIndicator';
+
+const LNDCreateInvoice = lazy(() => import('../screen/lnd/lndCreateInvoice'));
+const SelectWallet = lazy(() => import('../screen/wallets/selectWallet'));
+const LNDViewInvoice = lazy(() => import('../screen/lnd/lndViewInvoice'));
+const LNDViewAdditionalInvoiceInformation = lazy(() => import('../screen/lnd/lndViewAdditionalInvoiceInformation'));
+const LNDViewAdditionalInvoicePreImage = lazy(() => import('../screen/lnd/lndViewAdditionalInvoicePreImage'));
+
+export const LNDCreateInvoiceComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <LNDCreateInvoice />
+  </Suspense>
+);
+
+export const SelectWalletComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <SelectWallet />
+  </Suspense>
+);
+
+export const LNDViewInvoiceComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <LNDViewInvoice />
+  </Suspense>
+);
+
+export const LNDViewAdditionalInvoiceInformationComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <LNDViewAdditionalInvoiceInformation />
+  </Suspense>
+);
+
+export const LNDViewAdditionalInvoicePreImageComponent = () => (
+  <Suspense fallback={<LazyLoadingIndicator />}>
+    <LNDViewAdditionalInvoicePreImage />
+  </Suspense>
+);
diff --git a/screen/lnd/lndCreateInvoice.js b/screen/lnd/lndCreateInvoice.js
index 81a1de9a9..0e99f1f0a 100644
--- a/screen/lnd/lndCreateInvoice.js
+++ b/screen/lnd/lndCreateInvoice.js
@@ -17,7 +17,6 @@ import { Icon } from 'react-native-elements';
 import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 
 import { BlueDismissKeyboardInputAccessory, BlueLoading } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import AmountInput from '../../components/AmountInput';
 import * as NavigationService from '../../NavigationService';
 import { BitcoinUnit, Chain } from '../../models/bitcoinUnits';
@@ -519,11 +518,3 @@ const styles = StyleSheet.create({
 
 export default LNDCreateInvoice;
 LNDCreateInvoice.routeName = 'LNDCreateInvoice';
-LNDCreateInvoice.navigationOptions = navigationStyle(
-  {
-    closeButton: true,
-    headerBackVisible: false,
-    statusBarStyle: 'light',
-  },
-  opts => ({ ...opts, title: loc.receive.header }),
-);
diff --git a/screen/lnd/lndViewAdditionalInvoiceInformation.js b/screen/lnd/lndViewAdditionalInvoiceInformation.js
index e15fc56e7..80416b251 100644
--- a/screen/lnd/lndViewAdditionalInvoiceInformation.js
+++ b/screen/lnd/lndViewAdditionalInvoiceInformation.js
@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from 'react';
 import { View, Share, StyleSheet } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { BlueLoading, BlueSpacing20, BlueText } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import QRCodeComponent from '../../components/QRCodeComponent';
@@ -102,8 +101,3 @@ const styles = StyleSheet.create({
 });
 
 export default LNDViewAdditionalInvoiceInformation;
-
-LNDViewAdditionalInvoiceInformation.navigationOptions = navigationStyle({}, opts => ({
-  ...opts,
-  title: loc.lndViewInvoice.additional_info,
-}));
diff --git a/screen/lnd/lndViewAdditionalInvoicePreImage.js b/screen/lnd/lndViewAdditionalInvoicePreImage.js
index ab2205b19..e54756414 100644
--- a/screen/lnd/lndViewAdditionalInvoicePreImage.js
+++ b/screen/lnd/lndViewAdditionalInvoicePreImage.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useRoute } from '@react-navigation/native';
 import { BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import loc from '../../loc';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import { useTheme } from '../../components/themes';
@@ -48,5 +47,3 @@ const styles = StyleSheet.create({
 });
 
 export default LNDViewAdditionalInvoicePreImage;
-
-LNDViewAdditionalInvoicePreImage.navigationOptions = navigationStyle({}, opts => ({ ...opts, title: loc.lndViewInvoice.additional_info }));
diff --git a/screen/lnd/lndViewInvoice.js b/screen/lnd/lndViewInvoice.js
index a25cf575a..2db7021cc 100644
--- a/screen/lnd/lndViewInvoice.js
+++ b/screen/lnd/lndViewInvoice.js
@@ -5,7 +5,6 @@ import { Icon } from 'react-native-elements';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import { useNavigation, useNavigationState, useRoute } from '@react-navigation/native';
 import { BlueLoading, BlueText, BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
-import navigationStyle from '../../components/navigationStyle';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
@@ -313,15 +312,4 @@ const styles = StyleSheet.create({
   },
 });
 
-LNDViewInvoice.navigationOptions = navigationStyle({}, (options, { theme }) => {
-  return {
-    ...options,
-    statusBarStyle: 'auto',
-    headerTitle: loc.lndViewInvoice.lightning_invoice,
-    headerStyle: {
-      backgroundColor: theme.colors.customHeader,
-    },
-  };
-});
-
 export default LNDViewInvoice;