From 9add71639539921c9635f2513ed85916eec390ab Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Tue, 3 Sep 2024 17:24:11 +0200
Subject: [PATCH] fix: Suspense the lazy loaded components in banking pages

---
 .../AccountTransactionsAside.tsx              | 20 +++++++++++++++++++
 .../AccountTransactionsList.tsx               | 19 ++++--------------
 .../CategorizeTransactionContent.tsx          |  6 +++++-
 .../MatchingTransactionBoot.tsx               |  6 ++++++
 4 files changed, 35 insertions(+), 16 deletions(-)
 create mode 100644 packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsAside.tsx

diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsAside.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsAside.tsx
new file mode 100644
index 000000000..f87ac1aa4
--- /dev/null
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsAside.tsx
@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { Suspense, lazy } from 'react';
+import { Spinner } from '@blueprintjs/core';
+import { AppContentShell } from '@/components/AppShell';
+
+const CategorizeTransactionAside = lazy(() =>
+  import('../CategorizeTransactionAside/CategorizeTransactionAside').then(
+    (module) => ({ default: module.CategorizeTransactionAside }),
+  ),
+);
+
+export function AccountTransactionsAside() {
+  return (
+    <AppContentShell.Aside>
+      <Suspense fallback={<Spinner size={20} />}>
+        <CategorizeTransactionAside />
+      </Suspense>
+    </AppContentShell.Aside>
+  );
+}
diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx
index 93f534093..6067860d9 100644
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
-import React, { Suspense } from 'react';
 import * as R from 'ramda';
 import { Spinner } from '@blueprintjs/core';
+import { Suspense, lazy } from 'react';
 
 import '@/style/pages/CashFlow/AccountTransactions/List.scss';
 
@@ -15,7 +15,7 @@ import {
 import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
 import { AccountTransactionsFilterTabs } from './AccountTransactionsFilterTabs';
 import { AppContentShell } from '@/components/AppShell';
-import { CategorizeTransactionAside } from '../CategorizeTransactionAside/CategorizeTransactionAside';
+import { AccountTransactionsAside } from './AccountTransactionsAside';
 import { AccountTransactionsLoadingBar } from './components';
 import { withBanking } from '../withBanking';
 
@@ -56,14 +56,6 @@ function AccountTransactionsMain() {
   );
 }
 
-function AccountTransactionsAside() {
-  return (
-    <AppContentShell.Aside>
-      <CategorizeTransactionAside />
-    </AppContentShell.Aside>
-  );
-}
-
 export default R.compose(
   withBanking(
     ({ selectedUncategorizedTransactionId, openMatchingTransactionAside }) => ({
@@ -73,11 +65,8 @@ export default R.compose(
   ),
 )(AccountTransactionsListRoot);
 
-const AccountsTransactionsAll = React.lazy(
-  () => import('./AccountsTransactionsAll'),
-);
-
-const AccountsTransactionsUncategorized = React.lazy(
+const AccountsTransactionsAll = lazy(() => import('./AccountsTransactionsAll'));
+const AccountsTransactionsUncategorized = lazy(
   () => import('./AllTransactionsUncategorized'),
 );
 
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx
index 89513c6b8..4f7b2601f 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx
@@ -1,6 +1,8 @@
 // @ts-nocheck
+import { Suspense } from 'react';
 import styled from 'styled-components';
 import * as R from 'ramda';
+import { Spinner } from '@blueprintjs/core';
 import { CategorizeTransactionBoot } from './CategorizeTransactionBoot';
 import { CategorizeTransactionForm } from './CategorizeTransactionForm';
 import { withBanking } from '@/containers/CashFlow/withBanking';
@@ -13,7 +15,9 @@ function CategorizeTransactionContentRoot({
       uncategorizedTransactionsIds={transactionsToCategorizeIdsSelected}
     >
       <CategorizeTransactionDrawerBody>
-        <CategorizeTransactionForm />
+        <Suspense fallback={<Spinner size={40} />}>
+          <CategorizeTransactionForm />
+        </Suspense>
       </CategorizeTransactionDrawerBody>
     </CategorizeTransactionBoot>
   );
diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransactionBoot.tsx b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransactionBoot.tsx
index e6a531c93..6699ce630 100644
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransactionBoot.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransactionBoot.tsx
@@ -2,6 +2,7 @@ import React, { createContext } from 'react';
 import { defaultTo } from 'lodash';
 import * as R from 'ramda';
 import { useGetBankTransactionsMatches } from '@/hooks/query/bank-rules';
+import { Spinner } from '@blueprintjs/core';
 
 interface MatchingTransactionBootValues {
   isMatchingTransactionsLoading: boolean;
@@ -52,6 +53,11 @@ function MatchingTransactionBoot({
     matches,
   } as MatchingTransactionBootValues;
 
+  const isLoading = isMatchingTransactionsLoading;
+
+  if (isLoading) {
+    return <Spinner size={40} />;
+  }
   return <RuleFormBootContext.Provider value={provider} {...props} />;
 }