feat(FinancialReports): add loading progress bar.

fix(preformance): Optimize preformance of virtualized list.
fix(preformance): Optimize financial reports preformance.

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -9,6 +9,10 @@ import GeneralLedgerHeader from './GeneralLedgerHeader';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
 import { GeneralLedgerProvider } from './GeneralLedgerProvider';
+import {
+  GeneralLedgerSheetAlerts,
+  GeneralLedgerSheetLoadingBar,
+} from './components';
 
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -64,6 +68,8 @@ function GeneralLedger({
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
+          <GeneralLedgerSheetLoadingBar />
+          <GeneralLedgerSheetAlerts />
 
           <div class="financial-statement__body">
             <GeneralLedgerTable

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useGeneralLedgerSheet, useAccounts } from 'hooks/query';
 
 const GeneralLedgerContext = createContext();
@@ -8,7 +8,14 @@ const GeneralLedgerContext = createContext();
  * General ledger provider.
  */
 function GeneralLedgerProvider({ query, ...props }) {
-  const { data: generalLedger, isFetching, refetch } = useGeneralLedgerSheet(query);
+  const {
+    data: generalLedger,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useGeneralLedgerSheet(query, {
+    keepPreviousData: true,
+  });
 
   // Accounts list.
   const { data: accounts, isFetching: isAccountsLoading } = useAccounts();
@@ -17,13 +24,14 @@ function GeneralLedgerProvider({ query, ...props }) {
     generalLedger,
     accounts,
     sheetRefresh: refetch,
-    isSheetLoading: isFetching,
+    isFetching,
+    isLoading,
     isAccountsLoading,
   };
   return (
-    <DashboardInsider name={'general-ledger-sheet'}>
+    <FinancialReportPage name={'general-ledger-sheet'}>
       <GeneralLedgerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -5,6 +5,8 @@ import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
+import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
+import TableFastCell from 'components/Datatable/TableFastCell';
 
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 import { useGeneralLedgerTableColumns } from './components';
@@ -12,25 +14,22 @@ import { useGeneralLedgerTableColumns } from './components';
 /**
  * General ledger table.
  */
-export default function GeneralLedgerTable({
-  companyName,
-}) {
+export default function GeneralLedgerTable({ companyName }) {
   const { formatMessage } = useIntl();
 
   // General ledger context.
   const {
     generalLedger: { tableRows, query },
-    isSheetLoading
+    isLoading,
   } = useGeneralLedgerContext();
 
   // General ledger table columns.
   const columns = useGeneralLedgerTableColumns();
 
   // Default expanded rows of general ledger table.
-  const expandedRows = useMemo(
-    () => defaultExpanderReducer(tableRows, 1),
-    [tableRows],
-  );
+  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 1), [
+    tableRows,
+  ]);
 
   const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
 
@@ -41,11 +40,11 @@ export default function GeneralLedgerTable({
       fromDate={query.from_date}
       toDate={query.to_date}
       name="general-ledger"
-      loading={isSheetLoading}
+      loading={isLoading}
       fullWidth={true}
     >
       <DataTable
-      className="bigcapital-datatable--financial-report"
+        className="bigcapital-datatable--financial-report"
         noResults={formatMessage({
           id: 'this_report_does_not_contain_any_data_between_date_period',
         })}
@@ -59,7 +58,12 @@ export default function GeneralLedgerTable({
         expandable={true}
         expandToggleColumn={1}
         sticky={true}
+        TableRowsRenderer={TableVirtualizedListRows}
+        // #TableVirtualizedListRows props.
+        vListrowHeight={28}
+        vListOverscanRowCount={0}
+        TableCellRenderer={TableFastCell}
       />
     </FinancialSheet>
   );
-}
+}

client/src/containers/FinancialStatements/GeneralLedger/components.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
 import { getForceWidth, getColumnWidth } from 'utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve the general ledger table columns.
@@ -46,6 +49,7 @@ export function useGeneralLedgerTableColumns() {
         accessor: 'reference_type_formatted',
         className: 'transaction_type',
         width: 125,
+        textOverview: true,
       },
       {
         Header: formatMessage({ id: 'transaction_number' }),
@@ -99,3 +103,51 @@ export function useGeneralLedgerTableColumns() {
     [formatMessage, tableRows],
   );
 }
+
+
+/**
+ * General ledger sheet alerts.
+ */
+ export function GeneralLedgerSheetAlerts() {
+  const {
+    generalLedger,
+    isLoading,
+    sheetRefresh
+  } = useGeneralLedgerContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    sheetRefresh();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) { return null; }
+
+  return (
+    <If condition={generalLedger.meta.is_cost_compute_running}>
+      <div class="alert-compute-running">
+        <Icon icon="info-block" iconSize={12} /> Just a moment! We're
+        calculating your cost transactions and this doesn't take much time.
+        Please check after sometime.{' '}
+
+        <Button onClick={handleRecalcReport} minimal={true} small={true}>
+          Refresh
+        </Button>
+      </div>
+    </If>
+  );
+}
+
+/**
+ * General ledger sheet loading bar.
+ */
+export function GeneralLedgerSheetLoadingBar() {
+  const {
+    isFetching,
+  } = useGeneralLedgerContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}