feat(FinancialReports): add loading progress bar.

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

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

@@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
 import { getColumnWidth } from 'utils';
 import { FormattedMessage as T } from 'react-intl';
+import { If } from 'components';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve AP aging summary columns.
@@ -54,3 +56,18 @@ export const useAPAgingSummaryColumns = () => {
     [tableRows, agingColumns],
   );
 };
+
+/**
+ * A/P aging summary sheet loading bar.
+ */
+ export function APAgingSummarySheetLoadingBar() {
+  const {
+    isAPAgingFetching
+  } = useAPAgingSummaryContext();
+
+  return (
+    <If condition={isAPAgingFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}