feat(FinancialReports): add loading progress bar.

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

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

@@ -10,6 +10,7 @@ import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
 import APAgingSummaryTable from './APAgingSummaryTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { APAgingSummaryProvider } from './APAgingSummaryProvider';
+import { APAgingSummarySheetLoadingBar } from './components';
 
 import withSettings from 'containers/Settings/withSettings';
 import withAPAgingSummaryActions from './withAPAgingSummaryActions'
@@ -59,6 +60,8 @@ function APAgingSummary({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <APAgingSummarySheetLoadingBar />
+
       <DashboardPageContent>
         <FinancialStatement>
           <APAgingSummaryHeader

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

@@ -1,6 +1,6 @@
 import React, { useMemo, createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useAPAgingSummaryReport,useARAgingSummaryReport , useVendors } from 'hooks/query';
+import FinancialReportPage from '../FinancialReportPage';
+import { useAPAgingSummaryReport, useVendors } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const APAgingSummaryContext = createContext();
@@ -17,7 +17,7 @@ function APAgingSummaryProvider({ filter, ...props }) {
     isLoading: isAPAgingLoading,
     isFetching: isAPAgingFetching,
     refetch,
-  } = useAPAgingSummaryReport(query);
+  } = useAPAgingSummaryReport(query, { keepPreviousData: true });
 
   // Retrieve the vendors list.
   const {
@@ -36,14 +36,12 @@ function APAgingSummaryProvider({ filter, ...props }) {
   };
 
   return (
-    <DashboardInsider name={'AP-Aging-Summary'}>
+    <FinancialReportPage name={'AP-Aging-Summary'}>
       <APAgingSummaryContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 
-
 const useAPAgingSummaryContext = () => useContext(APAgingSummaryContext);
 
-
 export { APAgingSummaryProvider, useAPAgingSummaryContext };

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

@@ -18,7 +18,7 @@ export default function APAgingSummaryTable({
   // AP aging summary report content.
   const {
     APAgingSummary: { tableRows },
-    isAPAgingFetching,
+    isAPAgingLoading,
   } = useAPAgingSummaryContext();
 
   // AP aging summary columns.
@@ -32,7 +32,7 @@ export default function APAgingSummaryTable({
       name={'payable-aging-summary'}
       sheetType={formatMessage({ id: 'payable_aging_summary' })}
       asDate={new Date()}
-      loading={isAPAgingFetching}
+      loading={isAPAgingLoading}
     >
       <DataTable
         className={'bigcapital-datatable--financial-report'}

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