chore(trading): make loading masks in tabs consistent along the app (#3155)

apps/trading/client-pages/portfolio/deposits-container.tsx

@@ -25,7 +25,8 @@ export const DepositsContainer = () => {
       <div className="h-full relative">
         <DepositsTable
           rowData={data || []}
-          noRowsOverlayComponent={() => null}
+          suppressLoadingOverlay
+          suppressNoRowsOverlay
           ref={gridRef}
           {...bottomPlaceholderProps}
         />

apps/trading/client-pages/portfolio/withdrawals-container.tsx

@@ -24,7 +24,8 @@ export const WithdrawalsContainer = () => {
         <WithdrawalsTable
           data-testid="withdrawals-history"
           rowData={data}
-          noRowsOverlayComponent={() => null}
+          suppressLoadingOverlay
+          suppressNoRowsOverlay
         />
         <div className="pointer-events-none absolute inset-0">
           <AsyncRenderer

libs/accounts/src/lib/accounts-manager.spec.tsx

@@ -15,6 +15,7 @@ jest.mock('@vegaprotocol/react-helpers', () => ({
 }));
 
 describe('AccountManager', () => {
+  describe('when rerender', () => {
     beforeEach(() => {
       mockedUseDataProvider
         .mockImplementationOnce((args) => {
@@ -32,6 +33,10 @@ describe('AccountManager', () => {
         });
     });
 
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
     it('change partyId should reload data provider', async () => {
       const { rerender } = render(
         <AccountManager
@@ -41,7 +46,8 @@ describe('AccountManager', () => {
         />
       );
       expect(
-      (helpers.useDataProvider as jest.Mock).mock.calls[0][0].variables.partyId
+        (helpers.useDataProvider as jest.Mock).mock.calls[0][0].variables
+          .partyId
       ).toEqual('partyOne');
       await act(() => {
         rerender(
@@ -53,7 +59,8 @@ describe('AccountManager', () => {
         );
       });
       expect(
-      (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables.partyId
+        (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables
+          .partyId
       ).toEqual('partyTwo');
     });
 
@@ -89,3 +96,32 @@ describe('AccountManager', () => {
       expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
     });
   });
+
+  it('splash loading should be displayed', async () => {
+    mockedUseDataProvider.mockImplementation((args) => {
+      return {
+        loading: true,
+        data: null,
+      };
+    });
+    await act(() => {
+      render(
+        <AccountManager
+          partyId="partyOne"
+          onClickAsset={jest.fn}
+          isReadOnly={false}
+        />
+      );
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          (content, element) =>
+            Boolean(
+              element?.className.endsWith('flex items-center justify-center')
+            ) && content.startsWith('Loading')
+        )
+      ).toBeInTheDocument();
+    });
+  });
+});

libs/accounts/src/lib/accounts-manager.tsx

@@ -60,7 +60,8 @@ export const AccountManager = ({
         onClickDeposit={onClickDeposit}
         onClickWithdraw={onClickWithdraw}
         isReadOnly={isReadOnly}
-        noRowsOverlayComponent={() => null}
+        suppressLoadingOverlay
+        suppressNoRowsOverlay
         pinnedAsset={pinnedAsset}
         getRowHeight={getRowHeight}
         {...bottomPlaceholderProps}

libs/positions/src/lib/positions-manager.tsx

@@ -1,7 +1,8 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { Position } from '../';
 import { usePositionsData, PositionsTable } from '../';
+import type { FilterChangedEvent } from 'ag-grid-community';
 import type { AgGridReact } from 'ag-grid-react';
 import * as Schema from '@vegaprotocol/types';
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
@@ -22,6 +23,7 @@ export const PositionsManager = ({
   noBottomPlaceholder,
 }: PositionsManagerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
+  const [dataCount, setDataCount] = useState(0);
   const { data, error, loading, reload } = usePositionsData(
     partyId,
     gridRef,
@@ -67,7 +69,12 @@ export const PositionsManager = ({
     gridRef,
     setId,
   });
-
+  useEffect(() => {
+    setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
+  }, [data]);
+  const onFilterChanged = useCallback((event: FilterChangedEvent) => {
+    setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
+  }, []);
   return (
     <div className="h-full relative">
       <PositionsTable
@@ -75,8 +82,10 @@ export const PositionsManager = ({
         ref={gridRef}
         onMarketClick={onMarketClick}
         onClose={onClose}
-        noRowsOverlayComponent={() => null}
+        suppressLoadingOverlay
+        suppressNoRowsOverlay
         isReadOnly={isReadOnly}
+        onFilterChanged={onFilterChanged}
         {...(noBottomPlaceholder ? null : bottomPlaceholderProps)}
       />
       <div className="pointer-events-none absolute inset-0">
@@ -85,7 +94,7 @@ export const PositionsManager = ({
           error={error}
           data={data}
           noDataMessage={t('No positions')}
-          noDataCondition={(data) => !(data && data.length)}
+          noDataCondition={(data) => !dataCount}
           reload={reload}
         />
       </div>