feat(FinancialReports): add loading progress bar.

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

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>
+  )
+}