feat(FinancialReports): add loading progress bar.

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

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
 import { useBalanceSheetContext } from './BalanceSheetProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Balance sheet alerts.
@@ -13,7 +14,7 @@ export function BalanceSheetAlerts() {
     balanceSheet,
   } = useBalanceSheetContext();
 
-  // Handle recalculate the report button.
+  // Handle refetch the report sheet.
   const handleRecalcReport = () => {
     refetchBalanceSheet();
   };
@@ -34,3 +35,18 @@ export function BalanceSheetAlerts() {
     </If>
   );
 }
+
+/**
+ * Balance sheet loading bar.
+ */
+export function BalanceSheetLoadingBar() {
+  const {
+    isFetching
+  } = useBalanceSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}