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,51 +15,29 @@ jest.mock('@vegaprotocol/react-helpers', () => ({
 }));
 
 describe('AccountManager', () => {
-  beforeEach(() => {
+  describe('when rerender', () => {
-    mockedUseDataProvider
+    beforeEach(() => {
-      .mockImplementationOnce((args) => {
+      mockedUseDataProvider
-        return {
+        .mockImplementationOnce((args) => {
-          data: [],
+          return {
-        };
+            data: [],
-      })
+          };
-      .mockImplementationOnce((args) => {
+        })
-        return {
+        .mockImplementationOnce((args) => {
-          data: [
+          return {
-            { asset: { id: 'a1' }, party: { id: 't1' } },
+            data: [
-            { asset: { id: 'a2' }, party: { id: 't2' } },
+              { asset: { id: 'a1' }, party: { id: 't1' } },
-          ],
+              { asset: { id: 'a2' }, party: { id: 't2' } },
-        };
+            ],
-      });
+          };
-  });
+        });
-
-  it('change partyId should reload data provider', async () => {
-    const { rerender } = render(
-      <AccountManager
-        partyId="partyOne"
-        onClickAsset={jest.fn}
-        isReadOnly={false}
-      />
-    );
-    expect(
-      (helpers.useDataProvider as jest.Mock).mock.calls[0][0].variables.partyId
-    ).toEqual('partyOne');
-    await act(() => {
-      rerender(
-        <AccountManager
-          partyId="partyTwo"
-          onClickAsset={jest.fn}
-          isReadOnly={false}
-        />
-      );
     });
-    expect(
-      (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables.partyId
-    ).toEqual('partyTwo');
-  });
 
-  it('update method should return proper result', async () => {
+    afterEach(() => {
-    let rerenderer: (ui: React.ReactElement) => void;
+      jest.clearAllMocks();
-    await act(() => {
+    });
+
+    it('change partyId should reload data provider', async () => {
       const { rerender } = render(
         <AccountManager
           partyId="partyOne"
@@ -67,13 +45,67 @@ describe('AccountManager', () => {
           isReadOnly={false}
         />
       );
-      rerenderer = rerender;
+      expect(
+        (helpers.useDataProvider as jest.Mock).mock.calls[0][0].variables
+          .partyId
+      ).toEqual('partyOne');
+      await act(() => {
+        rerender(
+          <AccountManager
+            partyId="partyTwo"
+            onClickAsset={jest.fn}
+            isReadOnly={false}
+          />
+        );
+      });
+      expect(
+        (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables
+          .partyId
+      ).toEqual('partyTwo');
     });
-    await waitFor(() => {
+
-      expect(screen.getByText('No accounts')).toBeInTheDocument();
+    it('update method should return proper result', async () => {
+      let rerenderer: (ui: React.ReactElement) => void;
+      await act(() => {
+        const { rerender } = render(
+          <AccountManager
+            partyId="partyOne"
+            onClickAsset={jest.fn}
+            isReadOnly={false}
+          />
+        );
+        rerenderer = rerender;
+      });
+      await waitFor(() => {
+        expect(screen.getByText('No accounts')).toBeInTheDocument();
+      });
+      await act(() => {
+        rerenderer(
+          <AccountManager
+            partyId="partyOne"
+            onClickAsset={jest.fn}
+            isReadOnly={false}
+          />
+        );
+      });
+
+      const container = document.querySelector('.ag-center-cols-container');
+      await waitFor(() => {
+        expect(container).toBeInTheDocument();
+      });
+      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(() => {
-      rerenderer(
+      render(
         <AccountManager
           partyId="partyOne"
           onClickAsset={jest.fn}
@@ -81,11 +113,15 @@ describe('AccountManager', () => {
         />
       );
     });
-
-    const container = document.querySelector('.ag-center-cols-container');
     await waitFor(() => {
-      expect(container).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          (content, element) =>
+            Boolean(
+              element?.className.endsWith('flex items-center justify-center')
+            ) && content.startsWith('Loading')
+        )
+      ).toBeInTheDocument();
     });
-    expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
   });
 });

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>