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

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

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

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-
 import 'style/pages/FinancialStatements/BalanceSheet.scss';
 
 import BalanceSheetHeader from './BalanceSheetHeader';
 import BalanceSheetTable from './BalanceSheetTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
-import { BalanceSheetAlerts } from './components';
+import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
 import { FinancialStatement } from 'components';
 
 import withBalanceSheetActions from './withBalanceSheetActions';
@@ -63,6 +62,7 @@ function BalanceSheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <BalanceSheetLoadingBar />
       <BalanceSheetAlerts />
 
       <DashboardPageContent>

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

@@ -12,20 +12,24 @@ function BalanceSheetProvider({ filter, ...props }) {
   ]);
 
   // Fetches the balance sheet report.
-  const { data: balanceSheet, isFetching, refetch } = useBalanceSheet(query);
+  const {
+    data: balanceSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useBalanceSheet(query, { keepPreviousData: true });
 
   const provider = {
     balanceSheet,
-    isLoading: isFetching,
+    isFetching,
+    isLoading,
     refetchBalanceSheet: refetch,
 
     query,
     filter,
   };
   return (
-    <FinancialReportPage
-      name={'balance-sheet'}
-    >
+    <FinancialReportPage name={'balance-sheet'}>
       <BalanceSheetContext.Provider value={provider} {...props} />
     </FinancialReportPage>
   );

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

client/src/containers/FinancialStatements/FinancialLoadingBar.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { MaterialProgressBar } from 'components';
+
+/**
+ * Financnail progress bar.
+ */
+export default function FinancialLoadingBar() {
+  return (
+    <div className={'financial-progressbar'}>
+      <MaterialProgressBar />
+    </div>
+  )
+}

client/src/containers/FinancialStatements/FinancialReports.js

@@ -1,13 +1,9 @@
-import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import { For } from 'components';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import financialReportMenus from 'config/financialReportsMenu';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { compose } from 'utils';
 
 import 'style/pages/FinancialStatements/FinancialSheets.scss';
 
@@ -34,6 +30,9 @@ function FinancialReportsSection({ sectionTitle, reports }) {
   );
 }
 
+/**
+ * Financial reports.
+ */
 export default function FinancialReports() {
   return (
     <DashboardInsider name={'financial-reports'}>

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -9,6 +9,10 @@ import GeneralLedgerHeader from './GeneralLedgerHeader';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
 import { GeneralLedgerProvider } from './GeneralLedgerProvider';
+import {
+  GeneralLedgerSheetAlerts,
+  GeneralLedgerSheetLoadingBar,
+} from './components';
 
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -64,6 +68,8 @@ function GeneralLedger({
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
+          <GeneralLedgerSheetLoadingBar />
+          <GeneralLedgerSheetAlerts />
 
           <div class="financial-statement__body">
             <GeneralLedgerTable

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useGeneralLedgerSheet, useAccounts } from 'hooks/query';
 
 const GeneralLedgerContext = createContext();
@@ -8,7 +8,14 @@ const GeneralLedgerContext = createContext();
  * General ledger provider.
  */
 function GeneralLedgerProvider({ query, ...props }) {
-  const { data: generalLedger, isFetching, refetch } = useGeneralLedgerSheet(query);
+  const {
+    data: generalLedger,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useGeneralLedgerSheet(query, {
+    keepPreviousData: true,
+  });
 
   // Accounts list.
   const { data: accounts, isFetching: isAccountsLoading } = useAccounts();
@@ -17,13 +24,14 @@ function GeneralLedgerProvider({ query, ...props }) {
     generalLedger,
     accounts,
     sheetRefresh: refetch,
-    isSheetLoading: isFetching,
+    isFetching,
+    isLoading,
     isAccountsLoading,
   };
   return (
-    <DashboardInsider name={'general-ledger-sheet'}>
+    <FinancialReportPage name={'general-ledger-sheet'}>
       <GeneralLedgerContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -5,6 +5,8 @@ import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
+import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
+import TableFastCell from 'components/Datatable/TableFastCell';
 
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 import { useGeneralLedgerTableColumns } from './components';
@@ -12,25 +14,22 @@ import { useGeneralLedgerTableColumns } from './components';
 /**
  * General ledger table.
  */
-export default function GeneralLedgerTable({
-  companyName,
-}) {
+export default function GeneralLedgerTable({ companyName }) {
   const { formatMessage } = useIntl();
 
   // General ledger context.
   const {
     generalLedger: { tableRows, query },
-    isSheetLoading
+    isLoading,
   } = useGeneralLedgerContext();
 
   // General ledger table columns.
   const columns = useGeneralLedgerTableColumns();
 
   // Default expanded rows of general ledger table.
-  const expandedRows = useMemo(
-    () => defaultExpanderReducer(tableRows, 1),
-    [tableRows],
-  );
+  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 1), [
+    tableRows,
+  ]);
 
   const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
 
@@ -41,11 +40,11 @@ export default function GeneralLedgerTable({
       fromDate={query.from_date}
       toDate={query.to_date}
       name="general-ledger"
-      loading={isSheetLoading}
+      loading={isLoading}
       fullWidth={true}
     >
       <DataTable
-      className="bigcapital-datatable--financial-report"
+        className="bigcapital-datatable--financial-report"
         noResults={formatMessage({
           id: 'this_report_does_not_contain_any_data_between_date_period',
         })}
@@ -59,7 +58,12 @@ export default function GeneralLedgerTable({
         expandable={true}
         expandToggleColumn={1}
         sticky={true}
+        TableRowsRenderer={TableVirtualizedListRows}
+        // #TableVirtualizedListRows props.
+        vListrowHeight={28}
+        vListOverscanRowCount={0}
+        TableCellRenderer={TableFastCell}
       />
     </FinancialSheet>
   );
-}
+}

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

@@ -1,7 +1,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
 import { getForceWidth, getColumnWidth } from 'utils';
 import { useGeneralLedgerContext } from './GeneralLedgerProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve the general ledger table columns.
@@ -46,6 +49,7 @@ export function useGeneralLedgerTableColumns() {
         accessor: 'reference_type_formatted',
         className: 'transaction_type',
         width: 125,
+        textOverview: true,
       },
       {
         Header: formatMessage({ id: 'transaction_number' }),
@@ -99,3 +103,51 @@ export function useGeneralLedgerTableColumns() {
     [formatMessage, tableRows],
   );
 }
+
+
+/**
+ * General ledger sheet alerts.
+ */
+ export function GeneralLedgerSheetAlerts() {
+  const {
+    generalLedger,
+    isLoading,
+    sheetRefresh
+  } = useGeneralLedgerContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    sheetRefresh();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) { return null; }
+
+  return (
+    <If condition={generalLedger.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>
+  );
+}
+
+/**
+ * General ledger sheet loading bar.
+ */
+export function GeneralLedgerSheetLoadingBar() {
+  const {
+    isFetching,
+  } = useGeneralLedgerContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}

client/src/containers/FinancialStatements/Journal/Journal.js

@@ -1,20 +1,21 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
-import { useIntl } from 'react-intl';
 
-import { compose } from 'utils';
+import 'style/pages/FinancialStatements/Journal.scss';
+
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
 import JournalTable from './JournalTable';
-
 import JournalHeader from './JournalHeader';
 import JournalActionsBar from './JournalActionsBar';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { JournalSheetProvider } from './JournalProvider';
+import { JournalSheetLoadingBar, JournalSheetAlerts } from './components';
 
 import withSettings from 'containers/Settings/withSettings';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withJournalActions from './withJournalActions';
 
-import 'style/pages/FinancialStatements/Journal.scss';
+import { compose } from 'utils';
 
 /**
  * Journal sheet.
@@ -60,6 +61,9 @@ function Journal({
             onSubmitFilter={handleFilterSubmit}
             pageFilter={filter}
           />
+          <JournalSheetLoadingBar />
+          <JournalSheetAlerts />
+
           <div class="financial-statement__body">
             <JournalTable
               companyName={organizationName}

client/src/containers/FinancialStatements/Journal/JournalProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useJournalSheet } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
@@ -9,20 +9,27 @@ const JournalSheetContext = createContext();
  * Journal sheet provider.
  */
 function JournalSheetProvider({ query, ...props }) {
-  const { data: journalSheet, isFetching, refetch } = useJournalSheet({
-    ...transformFilterFormToQuery(query)
-  });
+  const {
+    data: journalSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useJournalSheet(
+    { ...transformFilterFormToQuery(query) },
+    { keepPreviousData: true },
+  );
 
   const provider = {
     journalSheet,
-    isLoading: isFetching,
-    refetchSheet: refetch
+    isLoading,
+    isFetching,
+    refetchSheet: refetch,
   };
 
   return (
-    <DashboardInsider name={'balance-sheet'}>
+    <FinancialReportPage name={'journal-sheet'}>
       <JournalSheetContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

client/src/containers/FinancialStatements/Journal/JournalTable.js

@@ -4,7 +4,8 @@ import { useIntl } from 'react-intl';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { useJournalSheetContext } from './JournalProvider';
-
+import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
+import TableFastCell from 'components/Datatable/TableFastCell';
 import { defaultExpanderReducer } from 'utils';
 import { useJournalTableColumns } from './components';
 
@@ -41,6 +42,8 @@ export default function JournalSheetTable({
     };
   }, []);
 
+
+  
   return (
     <FinancialSheet
       companyName={companyName}
@@ -62,6 +65,13 @@ export default function JournalSheetTable({
         })}
         expanded={expandedRows}
         sticky={true}
+        TableRowsRenderer={TableVirtualizedListRows}
+        // #TableVirtualizedListRows props.
+        vListrowHeight={28}
+        vListOverscanRowCount={2}
+
+        TableCellRenderer={TableFastCell}
+        id={'journal'}
       />
     </FinancialSheet>
   );

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import moment from 'moment';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
+import { useJournalSheetContext } from './JournalProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
 
 /**
  * Retrieve the journal table columns.
@@ -60,3 +64,50 @@ export const useJournalTableColumns = () => {
     [formatMessage],
   );
 };
+
+/**
+ * Journal sheet loading bar.
+ */
+export function JournalSheetLoadingBar() {
+  const {
+    isFetching
+  } = useJournalSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  )
+}
+
+/**
+ * Journal sheet alerts.
+ */
+ export function JournalSheetAlerts() {
+  const {
+    isLoading,
+    refetchSheet,
+    journalSheet,
+  } = useJournalSheetContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    refetchSheet();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) { return null; }
+
+  return (
+    <If condition={journalSheet.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>
+  );
+}

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.js

@@ -1,25 +1,31 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useProfitLossSheet } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const ProfitLossSheetContext = createContext();
 
 function ProfitLossSheetProvider({ query, ...props }) {
-  const { data: profitLossSheet, isFetching, refetch } = useProfitLossSheet({
+  const {
+    data: profitLossSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useProfitLossSheet({
     ...transformFilterFormToQuery(query),
   });
 
   const provider = {
     profitLossSheet,
-    isLoading: isFetching,
+    isLoading,
+    isFetching,
     sheetRefetch: refetch,
   };
 
   return (
-    <DashboardInsider>
+    <FinancialReportPage name={'profit-loss-sheet'}>
       <ProfitLossSheetContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js

@@ -14,6 +14,10 @@ import withSettings from 'containers/Settings/withSettings';
 
 import 'style/pages/FinancialStatements/ProfitLossSheet.scss';
 import { ProfitLossSheetProvider } from './ProfitLossProvider';
+import {
+  ProfitLossSheetLoadingBar,
+  ProfitLossSheetAlerts
+} from './components';
 
 /**
  * Profit/Loss financial statement sheet.
@@ -23,7 +27,7 @@ function ProfitLossSheet({
   organizationName,
 
   // #withProfitLossActions
-  toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer
+  toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer,
 }) {
   const [filter, setFilter] = useState({
     basis: 'cash',
@@ -32,7 +36,7 @@ function ProfitLossSheet({
     displayColumnsType: 'total',
     accountsFilter: 'all-accounts',
   });
- 
+
   // Handle submit filter.
   const handleSubmitFilter = (filter) => {
     const _filter = {
@@ -52,9 +56,12 @@ function ProfitLossSheet({
   };
 
   // Hide the filter drawer once the page unmount.
-  React.useEffect(() => () => {
-    toggleDisplayFilterDrawer(false);
-  }, [toggleDisplayFilterDrawer])
+  React.useEffect(
+    () => () => {
+      toggleDisplayFilterDrawer(false);
+    },
+    [toggleDisplayFilterDrawer],
+  );
 
   return (
     <ProfitLossSheetProvider query={filter}>
@@ -62,6 +69,8 @@ function ProfitLossSheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <ProfitLossSheetLoadingBar />
+      <ProfitLossSheetAlerts />
 
       <DashboardPageContent>
         <div class="financial-statement">
@@ -71,9 +80,7 @@ function ProfitLossSheet({
           />
 
           <div class="financial-statement__body">
-            <ProfitLossSheetTable
-              companyName={organizationName}
-            />
+            <ProfitLossSheetTable companyName={organizationName} />
           </div>
         </div>
       </DashboardPageContent>

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Button } from '@blueprintjs/core';
+import { Icon, If } from 'components';
+import { useProfitLossSheetContext } from './ProfitLossProvider';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Profit/loss sheet loading bar.
+ */
+export function ProfitLossSheetLoadingBar() {
+  const { isFetching } = useProfitLossSheetContext();
+
+  return (
+    <If condition={isFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}
+
+/**
+ * Balance sheet alerts.
+ */
+export function ProfitLossSheetAlerts() {
+  const {
+    isLoading,
+    sheetRefetch,
+    profitLossSheet,
+  } = useProfitLossSheetContext();
+
+  // Handle refetch the report sheet.
+  const handleRecalcReport = () => {
+    sheetRefetch();
+  };
+  // Can't display any error if the report is loading.
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <If condition={profitLossSheet.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>
+  );
+}

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceProvider.js

@@ -1,27 +1,36 @@
 import React, { createContext, useContext } from 'react';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import FinancialReportPage from '../FinancialReportPage';
 import { useTrialBalanceSheet } from 'hooks/query';
 import { transformFilterFormToQuery } from '../common';
 
 const TrialBalanceSheetContext = createContext();
 
 function TrialBalanceSheetProvider({ query, ...props }) {
-  const { data: trialBalanceSheet, isFetching, refetch } = useTrialBalanceSheet(
+  const {
+    data: trialBalanceSheet,
+    isFetching,
+    isLoading,
+    refetch,
+  } = useTrialBalanceSheet(
     {
       ...transformFilterFormToQuery(query),
     },
+    {
+      keepPreviousData: true,
+    },
   );
 
   const provider = {
     trialBalanceSheet,
-    isLoading: isFetching,
+    isLoading,
+    isFetching,
     refetchSheet: refetch,
   };
 
   return (
-    <DashboardInsider name={'trial-balance-sheet'}>
+    <FinancialReportPage name={'trial-balance-sheet'}>
       <TrialBalanceSheetContext.Provider value={provider} {...props} />
-    </DashboardInsider>
+    </FinancialReportPage>
   );
 }
 

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -9,6 +9,11 @@ import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
 import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+import {
+  TrialBalanceSheetAlerts,
+  TrialBalanceSheetLoadingBar,
+} from './components';
+
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withSettings from 'containers/Settings/withSettings';
 
@@ -22,7 +27,7 @@ function TrialBalanceSheet({
   organizationName,
 
   // #withTrialBalanceSheetActions
-  toggleTrialBalanceFilterDrawer: toggleFilterDrawer
+  toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
   const [filter, setFilter] = useState({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -53,9 +58,12 @@ function TrialBalanceSheet({
   };
 
   // Hide the filter drawer once the page unmount.
-  useEffect(() => () => {
-    toggleFilterDrawer(false)
-  }, [toggleFilterDrawer]);
+  useEffect(
+    () => () => {
+      toggleFilterDrawer(false);
+    },
+    [toggleFilterDrawer],
+  );
 
   return (
     <TrialBalanceSheetProvider query={filter}>
@@ -63,6 +71,9 @@ function TrialBalanceSheet({
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
+      <TrialBalanceSheetLoadingBar />
+      <TrialBalanceSheetAlerts />
+
       <DashboardPageContent>
         <div class="financial-statement">
           <TrialBalanceSheetHeader

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