feat(FinancialReports): add loading progress bar.

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

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js

@@ -10,6 +10,7 @@ import ARAgingSummaryActionsBar from './ARAgingSummaryActionsBar';
 import ARAgingSummaryTable from './ARAgingSummaryTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
+import { ARAgingSummarySheetLoadingBar } from './components';
 
 import withARAgingSummaryActions from './withARAgingSummaryActions'
 import withSettings from 'containers/Settings/withSettings';
@@ -57,6 +58,8 @@ function ReceivableAgingSummarySheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <ARAgingSummarySheetLoadingBar />
+
       <DashboardPageContent>
         <FinancialStatement>
           <ARAgingSummaryHeader

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryProvider.js

@@ -1,5 +1,5 @@
 import React, { useMemo, createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useARAgingSummaryReport, useCustomers } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
@@ -12,12 +12,13 @@ function ARAgingSummaryProvider({ filter, ...props }) {
   // Transformes the filter from to the Url query.
   const query = useMemo(() => transformFilterFormToQuery(filter), [filter]);
 
+  // A/R aging summary sheet context.
   const {
     data: ARAgingSummary,
     isLoading: isARAgingLoading,
     isFetching: isARAgingFetching,
     refetch,
-  } = useARAgingSummaryReport(query);
+  } = useARAgingSummaryReport(query, { keepPreviousData: true });
 
   // Retrieve the customers list.
   const {
@@ -36,9 +37,9 @@ function ARAgingSummaryProvider({ filter, ...props }) {
   };
 
   return (
-    <DashboardInsider name={'AR-Aging-Summary'}>
+    <FinancialReportPage name={'AR-Aging-Summary'}>
       <ARAgingSummaryContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js

@@ -16,7 +16,7 @@ export default function ReceivableAgingSummaryTable({
   const { formatMessage } = useIntl();
 
   // AR aging summary report context.
-  const { ARAgingSummary, isARAgingFetching } = useARAgingSummaryContext();
+  const { ARAgingSummary, isARAgingLoading } = useARAgingSummaryContext();
 
   // AR aging summary columns.
   const columns = useARAgingSummaryColumns();
@@ -33,7 +33,7 @@ export default function ReceivableAgingSummaryTable({
       name={'receivable-aging-summary'}
       sheetType={formatMessage({ id: 'receivable_aging_summary' })}
       asDate={new Date()}
-      loading={isARAgingFetching}
+      loading={isARAgingLoading}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import { getColumnWidth } from 'utils';
 import { FormattedMessage as T } from 'react-intl';
+import { If } from 'components';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve AR aging summary columns.
@@ -56,3 +58,18 @@ export const useARAgingSummaryColumns = () => {
     [tableRows, agingColumns],
   );
 };
+
+/**
+ * A/R aging summary sheet loading bar.
+ */
+ export function ARAgingSummarySheetLoadingBar() {
+  const {
+    isARAgingFetching,
+  } = useARAgingSummaryContext();
+
+  return (
+    <If condition={isARAgingFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}