REF: LNDCreateInvoiceComponent lazy load

This commit is contained in:
Marcos Rodriguez Velez 2024-05-08 21:24:30 -04:00
parent a1b52f563c
commit eb50d02769
No known key found for this signature in database
GPG Key ID: 6030B2F48CCE86D7
7 changed files with 113 additions and 65 deletions

View File

@ -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

View File

@ -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;

View File

@ -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>
);

View File

@ -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 }),
);

View File

@ -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,
}));

View File

@ -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 }));

View File

@ -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;