QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-20 23:00:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Suspense the lazy loaded components in banking pages

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-03 17:24:11 +02:00
parent 0c6f23e770
commit 9add716395
4 changed files with 35 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsAside.tsx Normal file
View File

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

19
packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx
View File

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