diff --git a/client/src/containers/FinancialStatements/CustomersTransactions/components.js b/client/src/containers/FinancialStatements/CustomersTransactions/components.js
index 871f1a336..989a6c811 100644
--- a/client/src/containers/FinancialStatements/CustomersTransactions/components.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/components.js
@@ -3,8 +3,7 @@ import intl from 'react-intl-universal';
 import { If } from 'components';
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
-import { getForceWidth, defaultExpanderReducer, getColumnWidth } from 'utils';
-import { CellTextSpan } from 'components/Datatable/Cells';
+import { getForceWidth, getColumnWidth } from 'utils';
 
 /**
  * Retrieve customers transactions columns.
@@ -90,10 +89,10 @@ export const useCustomersTransactionsColumns = () => {
  * customers transactions loading bar.
  */
 export function CustomersTransactionsLoadingBar() {
-  const { isCustomersTransactionsLoading } = useCustomersTransactionsContext();
+  const { isCustomersTransactionsFetching } = useCustomersTransactionsContext();
 
   return (
-    <If condition={isCustomersTransactionsLoading}>
+    <If condition={isCustomersTransactionsFetching}>
       <FinancialLoadingBar />
     </If>
   );
diff --git a/client/src/containers/FinancialStatements/InventoryItemDetails/components.js b/client/src/containers/FinancialStatements/InventoryItemDetails/components.js
index ca7e71c5a..749e5d952 100644
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/components.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/components.js
@@ -25,9 +25,10 @@ export const useInventoryItemDetailsColumns = () => {
  * inventory item details  loading bar.
  */
 export function InventoryItemDetailsLoadingBar() {
-  const { isInventoryItemDetailsLoading } = useInventoryItemDetailsContext();
+  const { isInventoryItemDetailsFetching } = useInventoryItemDetailsContext();
+
   return (
-    <If condition={isInventoryItemDetailsLoading}>
+    <If condition={isInventoryItemDetailsFetching}>
       <FinancialLoadingBar />
     </If>
   );
diff --git a/client/src/containers/FinancialStatements/VendorsTransactions/components.js b/client/src/containers/FinancialStatements/VendorsTransactions/components.js
index 1287179ca..14c9f3145 100644
--- a/client/src/containers/FinancialStatements/VendorsTransactions/components.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/components.js
@@ -3,8 +3,7 @@ import intl from 'react-intl-universal';
 import { If } from 'components';
 import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
-import { defaultExpanderReducer, getColumnWidth, getForceWidth } from 'utils';
-import { CellTextSpan } from 'components/Datatable/Cells';
+import { getColumnWidth, getForceWidth } from 'utils';
 
 /**
  * Retrieve vendors transactions columns.
@@ -90,9 +89,10 @@ export const useVendorsTransactionsColumns = () => {
  * vendors transactions loading bar.
  */
 export function VendorsTransactionsLoadingBar() {
-  const { isVendorsTransactionsLoading } = useVendorsTransactionsContext();
+  const { isVendorsTransactionFetching } = useVendorsTransactionsContext();
+
   return (
-    <If condition={isVendorsTransactionsLoading}>
+    <If condition={isVendorsTransactionFetching}>
       <FinancialLoadingBar />
     </If>
   );