Restructure code splitting — remove the quick flash white screen when switching pages

packages/yoroi-extension/app/Routes.js

@@ -11,10 +11,18 @@ import type { GeneratedData as WalletData } from './containers/wallet/Wallet';
 import type { GeneratedData as ReceiveData } from './containers/wallet/Receive';
 import type { ConfigType } from '../config/config-types';
 import type { GeneratedData as AssetsData } from './containers/wallet/AssetsWrapper';
+import LoadingPage from './containers/LoadingPage';
+import StakingPage, { StakingPageContentPromise } from './containers/wallet/staking/StakingPage';
+import Wallet from './containers/wallet/Wallet';
+import Settings from './containers/settings/Settings';
+import Transfer, { WalletTransferPagePromise } from './containers/transfer/Transfer';
+import VotingPage, { VotingPageContentPromise } from './containers/wallet/voting/VotingPage';
+import ConnectedWebsitesPage, { ConnectedWebsitesPagePromise } from './containers/dapp-connector/ConnectedWebsitesContainer';
+import WalletAddPage, { AddAnotherWalletPromise } from './containers/wallet/WalletAddPage'
+import AssetsWrapper from './containers/wallet/AssetsWrapper';
+import NFTsWrapper from './containers/wallet/NFTsWrapper';
 
 // PAGES
-const WalletAddPagePromise = () => import('./containers/wallet/WalletAddPage');
-const WalletAddPage = React.lazy(WalletAddPagePromise);
 const LanguageSelectionPagePromise = () => import('./containers/profile/LanguageSelectionPage');
 const LanguageSelectionPage = React.lazy(LanguageSelectionPagePromise);
 const TermsOfUsePagePromise = () => import('./containers/profile/TermsOfUsePage');
@@ -23,8 +31,6 @@ const UriPromptPagePromise = () => import('./containers/profile/UriPromptPage');
 const UriPromptPage = React.lazy(UriPromptPagePromise);
 
 // SETTINGS
-const SettingsPromise = () => import('./containers/settings/Settings');
-const Settings = React.lazy(SettingsPromise);
 const GeneralSettingsPagePromise = () => import('./containers/settings/categories/GeneralSettingsPage');
 const GeneralSettingsPage = React.lazy(GeneralSettingsPagePromise);
 const WalletSettingsPagePromise = () => import('./containers/settings/categories/WalletSettingsPage');
@@ -38,16 +44,10 @@ const TermsOfUseSettingsPage = React.lazy(TermsOfUseSettingsPagePromise);
 const SupportSettingsPagePromise = () => import('./containers/settings/categories/SupportSettingsPage');
 const SupportSettingsPage = React.lazy(SupportSettingsPagePromise);
 
-// Dynamic container loading - resolver loads file relative to '/app/' directory
-const LoadingPagePromise = () => import('./containers/LoadingPage');
-const LoadingPage = React.lazy(LoadingPagePromise);
 
 const NightlyPagePromise = () => import('./containers/profile/NightlyPage');
 const NightlyPage = React.lazy(NightlyPagePromise);
 
-const WalletPromise = () => import('./containers/wallet/Wallet');
-const Wallet = React.lazy(WalletPromise);
-
 const MyWalletsPagePromise = () => import('./containers/wallet/MyWalletsPage');
 const MyWalletsPage = React.lazy(MyWalletsPagePromise);
 
@@ -66,9 +66,6 @@ const WalletReceivePage = React.lazy(WalletReceivePagePromise);
 const URILandingPagePromise = () => import('./containers/uri/URILandingPage');
 const URILandingPage = React.lazy(URILandingPagePromise);
 
-const TransferPromise = () => import('./containers/transfer/Transfer');
-const Transfer = React.lazy(TransferPromise);
-
 const ReceivePromise = () => import('./containers/wallet/Receive');
 const Receive = React.lazy(ReceivePromise);
 
@@ -81,9 +78,6 @@ const CardanoStakingPage = React.lazy(CardanoStakingPagePromise);
 const NoticeBoardPagePromise = () => import('./containers/notice-board/NoticeBoardPage');
 const NoticeBoardPage = React.lazy(NoticeBoardPagePromise);
 
-const VotingPagePromise = () => import('./containers/wallet/voting/VotingPage');
-const VotingPage = React.lazy(VotingPagePromise);
-
 const ComplexityLevelSettingsPagePromise = () => import('./containers/settings/categories/ComplexityLevelSettingsPage');
 const ComplexityLevelSettingsPage = React.lazy(ComplexityLevelSettingsPagePromise);
 
@@ -96,15 +90,6 @@ const BlockchainSettingsPage = React.lazy(BlockchainSettingsPagePromise);
 const WalletSwitchPromise = () => import('./containers/WalletSwitch');
 const WalletSwitch = React.lazy(WalletSwitchPromise);
 
-const StakingPagePromise = () => import('./containers/wallet/staking/StakingPage');
-const StakingPage = React.lazy(StakingPagePromise);
-
-const AssetsWrapperPromise = () => import('./containers/wallet/AssetsWrapper');
-const AssetsWrapper = React.lazy(AssetsWrapperPromise);
-
-const NFTsWrapperPromise = () => import('./containers/wallet/NFTsWrapper');
-const NFTsWrapper = React.lazy(NFTsWrapperPromise);
-
 const TokensPageRevampPromise = () => import('./containers/wallet/TokensPageRevamp');
 const TokensPageRevamp = React.lazy(TokensPageRevampPromise);
 
@@ -117,48 +102,41 @@ const NFTsPageRevamp = React.lazy(NFTsPageRevampPromise);
 const NFTDetailPageRevampPromise = () => import('./containers/wallet/NFTDetailPageRevamp');
 const NFTDetailPageRevamp = React.lazy(NFTDetailPageRevampPromise);
 
-const ConnectedWebsitesPagePromise = () => import('./containers/dapp-connector/ConnectedWebsitesContainer');
-const ConnectedWebsitesPage = React.lazy(ConnectedWebsitesPagePromise);
-
 const YoroiPalettePagePromise = () => import('./containers/experimental/YoroiPalette');
 const YoroiPalettePage = React.lazy(YoroiPalettePagePromise);
 
 const YoroiThemesPagePromise = () => import('./containers/experimental/yoroiThemes');
 const YoroiThemesPage = React.lazy(YoroiThemesPagePromise);
 
 export const LazyLoadPromises: Array<() => any> = [
-  WalletAddPagePromise,
+  AddAnotherWalletPromise,
+  StakingPageContentPromise,
   LanguageSelectionPagePromise,
   TermsOfUsePagePromise,
   UriPromptPagePromise,
-  SettingsPromise,
   GeneralSettingsPagePromise,
   WalletSettingsPagePromise,
   ExternalStorageSettingsPagePromise,
   OAuthDropboxPagePromise,
   TermsOfUseSettingsPagePromise,
   SupportSettingsPagePromise,
-  LoadingPagePromise,
   NightlyPagePromise,
-  WalletPromise,
   MyWalletsPagePromise,
   WalletSummaryPagePromise,
   WalletSendPagePromise,
   WalletAssetsPagePromise,
   WalletReceivePagePromise,
   URILandingPagePromise,
-  TransferPromise,
+  WalletTransferPagePromise,
   ReceivePromise,
   StakingDashboardPagePromise,
   CardanoStakingPagePromise,
   NoticeBoardPagePromise,
-  VotingPagePromise,
+  VotingPageContentPromise,
   ComplexityLevelSettingsPagePromise,
   ComplexityLevelPagePromise,
   BlockchainSettingsPagePromise,
   WalletSwitchPromise,
-  StakingPagePromise,
-  AssetsWrapperPromise,
   TokensPageRevampPromise,
   TokensDetailPageRevampPromise,
   NFTsPageRevampPromise,
@@ -313,9 +291,7 @@ const WalletsSubpages = (stores, actions) => (
     <Route
       exact
       path={ROUTES.WALLETS.TRANSACTIONS}
-      component={(props) => {
-        return <WalletSummaryPage {...props} stores={stores} actions={actions} />
-      }}
+      component={(props) => <WalletSummaryPage {...props} stores={stores} actions={actions} />}
     />
     <Route
       exact
@@ -433,7 +409,6 @@ const NFTsSubPages = (stores, actions) => (
     />
   </Switch>
 )
-/* eslint-enable max-len */
 
 export function wrapSettings(
   settingsProps: InjectedOrGenerated<SettingsData>,
@@ -443,7 +418,9 @@ export function wrapSettings(
     <Settings
       {...settingsProps}
     >
-      {children}
+      <Suspense fallback={null}>
+        {children}
+      </Suspense>
     </Settings>
   );
 }
@@ -456,7 +433,9 @@ export function wrapAssets(
     <AssetsWrapper
       {...assetsProps}
     >
-      {children}
+      <Suspense fallback={null}>
+        {children}
+      </Suspense>
     </AssetsWrapper>
   );
 }
@@ -469,7 +448,9 @@ export function wrapNFTs(
     <NFTsWrapper
       {...assetsProps}
     >
-      {children}
+      <Suspense fallback={null}>
+        {children}
+      </Suspense>
     </NFTsWrapper>
   );
 }
@@ -482,7 +463,9 @@ export function wrapWallet(
     <Wallet
       {...walletProps}
     >
-      {children}
+      <Suspense fallback={null}>
+        {children}
+      </Suspense>
     </Wallet>
   );
 }
@@ -498,4 +481,4 @@ export function wrapReceive(
       {children}
     </Receive>
   );
-}
+}

packages/yoroi-extension/app/containers/dapp-connector/ConnectedWebsitesContainer.js

@@ -1,6 +1,6 @@
 // @flow
 import type { Node, ComponentType } from 'react'
-import { Component } from 'react'
+import { Component, lazy, Suspense } from 'react'
 import { computed } from 'mobx'
 import { observer } from 'mobx-react'
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl'
@@ -14,7 +14,6 @@ import { getReceiveAddress } from '../../stores/stateless/addressStores';
 import { withLayout } from '../../styles/context/layout'
 import type { LayoutComponentMap } from '../../styles/context/layout'
 import SidebarContainer from '../SidebarContainer'
-import ConnectedWebsitesPage from '../../components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage'
 import DappConnectorNavbar from '../../components/dapp-connector/Layout/DappConnectorNavbar'
 import { genLookupOrFail } from '../../stores/stateless/tokenHelpers'
 import FullscreenLayout from '../../components/layout/FullscreenLayout'
@@ -33,6 +32,9 @@ import type { WalletChecksum } from '@emurgo/cip4-js';
 import type { MultiToken } from '../../api/common/lib/MultiToken'
 
 
+export const ConnectedWebsitesPagePromise: void => Promise<any> = () => import('../../components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage');
+const ConnectedWebsitesPage = lazy(ConnectedWebsitesPagePromise);
+
 export type GeneratedData = typeof ConnectedWebsitesPageContainer.prototype.generated;
 
 type Props = InjectedOrGenerated<GeneratedData>
@@ -103,16 +105,18 @@ class ConnectedWebsitesPageContainer extends Component<AllProps> {
         navbar={<DappConnectorNavbar />}
       >
         <FullscreenLayout bottomPadding={0}>
-          <ConnectedWebsitesPage
-            whitelistEntries={this.generated.stores.connector.currentConnectorWhitelist}
-            wallets={wallets}
-            onRemoveWallet={this.onRemoveWallet}
-            activeSites={this.generated.stores.connector.activeSites.sites}
-            getTokenInfo={genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)}
-            shouldHideBalance={this.generated.stores.profile.shouldHideBalance}
-            getConceptualWallet={this.getConceptualWallet.bind(this)}
-            getWalletInfo={this.getWalletInfo.bind(this)}
-          />)
+          <Suspense fallback={null}>
+            <ConnectedWebsitesPage
+              whitelistEntries={this.generated.stores.connector.currentConnectorWhitelist}
+              wallets={wallets}
+              onRemoveWallet={this.onRemoveWallet}
+              activeSites={this.generated.stores.connector.activeSites.sites}
+              getTokenInfo={genLookupOrFail(this.generated.stores.tokenInfoStore.tokenInfo)}
+              shouldHideBalance={this.generated.stores.profile.shouldHideBalance}
+              getConceptualWallet={this.getConceptualWallet.bind(this)}
+              getWalletInfo={this.getWalletInfo.bind(this)}
+            />
+          </Suspense>
         </FullscreenLayout>
       </TopBarLayout>
     );

packages/yoroi-extension/app/containers/transfer/Transfer.js

@@ -1,5 +1,5 @@
 // @flow
-import { Component } from 'react';
+import { Component, lazy, Suspense } from 'react';
 import type { Node, ComponentType } from 'react';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
@@ -15,7 +15,6 @@ import UnsupportedWallet from '../wallet/UnsupportedWallet';
 import NavBarTitle from '../../components/topbar/NavBarTitle';
 import NavBarContainer from '../NavBarContainer';
 import globalMessages from '../../i18n/global-messages';
-import WalletTransferPage from './WalletTransferPage';
 import type { GeneratedData as WalletTransferPageData } from './WalletTransferPage';
 import type { GeneratedData as SidebarContainerData } from '../SidebarContainer';
 import type { GeneratedData as NavBarContainerData } from '../NavBarContainer';
@@ -27,6 +26,9 @@ import { withLayout } from '../../styles/context/layout';
 import type { LayoutComponentMap } from '../../styles/context/layout';
 import type { GeneratedData as NavBarContainerRevampData } from '../NavBarContainerRevamp';
 
+export const WalletTransferPagePromise: void => Promise<any> = () => import('./WalletTransferPage');
+const WalletTransferPage = lazy(WalletTransferPagePromise);
+
 export type GeneratedData = typeof Transfer.prototype.generated;
 
 type Props = {|
@@ -84,14 +86,17 @@ class Transfer extends Component<AllProps> {
     if (wallet.getParent().getNetworkInfo().CoinType !== CoinTypes.CARDANO) {
       return (<UnsupportedWallet />);
     }
+    const isRevamp = this.generated.stores.profile.isRevampTheme;
     return (
       <>
-        <HorizontalLine />
+        {!isRevamp && <HorizontalLine />}
         <BackgroundColoredLayout>
-          <WalletTransferPage
-            {...this.generated.WalletTransferPageProps}
-            publicDeriver={wallet}
-          />
+          <Suspense fallback={null}>
+            <WalletTransferPage
+              {...this.generated.WalletTransferPageProps}
+              publicDeriver={wallet}
+            />
+          </Suspense>
         </BackgroundColoredLayout>
       </>
     );
@@ -116,7 +121,10 @@ class Transfer extends Component<AllProps> {
     |},
     stores: {|
       app: {| currentRoute: string |},
-      wallets: {| selected: null | PublicDeriver<> |}
+      wallets: {| selected: null | PublicDeriver<> |},
+      profile: {|
+          isRevampTheme: boolean,
+      |},
     |}
     |} {
     if (this.props.generated !== undefined) {
@@ -133,6 +141,9 @@ class Transfer extends Component<AllProps> {
         },
         wallets: {
           selected: stores.wallets.selected,
+        },
+        profile: {
+          isRevampTheme: stores.profile.isRevampTheme,
         }
       },
       actions: {

packages/yoroi-extension/app/containers/wallet/WalletAddPage.js

@@ -1,6 +1,6 @@
 // @flow
 import type { Node, ComponentType } from 'react';
-import { Component } from 'react';
+import { Component, lazy } from 'react';
 import { observer } from 'mobx-react';
 import { computed } from 'mobx';
 import { intlShape } from 'react-intl';
@@ -13,7 +13,6 @@ import TopBarLayout from '../../components/layout/TopBarLayout';
 import BannerContainer from '../banners/BannerContainer';
 import type { GeneratedData as BannerContainerData } from '../banners/BannerContainer';
 import WalletAdd from '../../components/wallet/WalletAdd';
-import AddAnotherWallet from '../../components/wallet/add/AddAnotherWallet';
 
 import WalletCreateDialogContainer from './dialogs/WalletCreateDialogContainer';
 import type { GeneratedData as WalletCreateDialogContainerData } from './dialogs/WalletCreateDialogContainer';
@@ -68,6 +67,9 @@ import NavBarRevamp from '../../components/topbar/NavBarRevamp';
 import { withLayout } from '../../styles/context/layout'
 import type { LayoutComponentMap } from '../../styles/context/layout'
 
+export const AddAnotherWalletPromise: void => Promise<any> = () => import('../../components/wallet/add/AddAnotherWallet');
+const AddAnotherWallet = lazy(AddAnotherWalletPromise);
+
 export type GeneratedData = typeof WalletAddPage.prototype.generated;
 
 type Props = InjectedOrGenerated<GeneratedData>;