feat(FinancialReports): add loading progress bar.

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

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceProvider.js

@@ -1,27 +1,36 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useTrialBalanceSheet } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const TrialBalanceSheetContext = createContext();
 
 function TrialBalanceSheetProvider({ query, ...props }) {
-  const { data: trialBalanceSheet, isFetching, refetch } = useTrialBalanceSheet(
+  const {
+    data: trialBalanceSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useTrialBalanceSheet(
     {
       ...transformFilterFormToQuery(query),
     },
+    {
+      keepPreviousData: true,
+    },
   );
 
   const provider = {
     trialBalanceSheet,
-    isLoading: isFetching,
+    isLoading,
+    isFetching,
     refetchSheet: refetch,
   };
 
   return (
-    <DashboardInsider name={'trial-balance-sheet'}>
+    <FinancialReportPage name={'trial-balance-sheet'}>
       <TrialBalanceSheetContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -9,6 +9,11 @@ import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
 import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import {
+  TrialBalanceSheetAlerts,
+  TrialBalanceSheetLoadingBar,
+} from './components';
+
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withSettings from 'containers/Settings/withSettings';
 
@@ -22,7 +27,7 @@ function TrialBalanceSheet({
   organizationName,
 
   // #withTrialBalanceSheetActions
-  toggleTrialBalanceFilterDrawer: toggleFilterDrawer
+  toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
   const [filter, setFilter] = useState({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -53,9 +58,12 @@ function TrialBalanceSheet({
   };
 
   // Hide the filter drawer once the page unmount.
-  useEffect(() => () => {
-    toggleFilterDrawer(false)
-  }, [toggleFilterDrawer]);
+  useEffect(
+    () => () => {
+      toggleFilterDrawer(false);
+    },
+    [toggleFilterDrawer],
+  );
 
   return (
     <TrialBalanceSheetProvider query={filter}>
@@ -63,6 +71,9 @@ function TrialBalanceSheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <TrialBalanceSheetLoadingBar />
+      <TrialBalanceSheetAlerts />
+
       <DashboardPageContent>
         <div class="financial-statement">
           <TrialBalanceSheetHeader

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { Button } from '@blueprintjs/core';
 import { getColumnWidth } from 'utils';
+import { If, Icon } from 'components';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
-
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve trial balance sheet table columns.
@@ -53,3 +55,50 @@ export const useTrialBalanceTableColumns = () => {
     [tableRows, formatMessage],
   );
 };
+
+/**
+ * Trial balance sheet progress loading bar.
+ */
+export function TrialBalanceSheetLoadingBar() {
+  const {
+    isFetching
+  } = useTrialBalanceSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}
+
+/**
+ * Trial balance sheet alerts.
+ */
+export function TrialBalanceSheetAlerts() {
+  const {
+    trialBalanceSheet: { meta },
+    isLoading,
+    refetchSheet
+  } = useTrialBalanceSheetContext();
+
+  // Handle refetch the sheet.
+  const handleRecalcReport = () => {
+    refetchSheet();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) { return null; }
+
+  return (
+    <If condition={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>
+  )
+}