feat(FinancialReports): add loading progress bar.

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

client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js

@@ -10,14 +10,14 @@ const EstimatesListContext = createContext();
  */
 function EstimatesListProvider({ query, ...props }) {
   // Fetches estimates resource views and fields.
-  const { data: estimatesViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: estimatesViews, isLoading: isViewsLoading } = useResourceViews(
     'sale_estimates',
   );
 
   // Fetches the estimates resource fields.
   const {
     data: estimatesFields,
-    isFetching: isFieldsLoading,
+    isLoading: isFieldsLoading,
   } = useResourceFields('sale_estimates');
 
   // Fetch estimates list according to the given custom view id.

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js

@@ -10,14 +10,14 @@ const InvoicesListContext = createContext();
  */
 function InvoicesListProvider({ query, ...props }) {
   // Fetch accounts resource views and fields.
-  const { data: invoicesViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: invoicesViews, isLoading: isViewsLoading } = useResourceViews(
     'sale_invoices',
   );
 
   // Fetch the accounts resource fields.
   const {
     data: invoicesFields,
-    isFetching: isFieldsLoading,
+    isLoading: isFieldsLoading,
   } = useResourceFields('sale_invoices');
 
   // Fetch accounts list according to the given custom view id.

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormProvider.js

@@ -31,7 +31,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     enabled: !!paymentReceiveId,
   });
   // Handle fetch accounts data.
-  const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
+  const { data: accounts, isLoading: isAccountsLoading } = useAccounts();
 
   // Fetch payment made settings.
   const fetchSettings = useSettingsPaymentReceives();
@@ -39,7 +39,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
   // Fetches customers list.
   const {
     data: { customers },
-    isFetching: isCustomersFetching,
+    isLoading: isCustomersLoading,
   } = useCustomers({ page_size: 10000 });
 
   // Detarmines whether the new mode.
@@ -58,9 +58,9 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
     customers,
 
     isPaymentLoading,
+    isAccountsLoading,
     isPaymentFetching,
-    isAccountsFetching,
-    isCustomersFetching,
+    isCustomersLoading,
     isNewMode,
 
     submitPayload,
@@ -72,7 +72,7 @@ function PaymentReceiveFormProvider({ paymentReceiveId, ...props }) {
 
   return (
     <DashboardInsider
-      loading={isPaymentLoading || isAccountsFetching || isCustomersFetching}
+      loading={isPaymentLoading || isAccountsLoading || isCustomersLoading}
       name={'payment-receive-form'}
     >
       <PaymentReceiveFormContext.Provider value={provider} {...props} />

client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js

@@ -1,6 +1,6 @@
 import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import { useResourceViews, useResourceFields, useReceipts } from 'hooks/query';
+import { useResourceViews, useReceipts } from 'hooks/query';
 import { isTableEmptyStatus } from 'utils';
 
 const ReceiptsListContext = createContext();
@@ -8,7 +8,7 @@ const ReceiptsListContext = createContext();
 // Receipts list provider.
 function ReceiptsListProvider({ query, ...props }) {
   // Fetch receipts resource views and fields.
-  const { data: receiptsViews, isFetching: isViewsLoading } = useResourceViews(
+  const { data: receiptsViews, isLoading: isViewsLoading } = useResourceViews(
     'sale_receipt',
   );