fix: dropdown closing on market list

Co-authored-by: maciek <maciek@vegaprotocol.io>

apps/static/src/assets/preloader.css

@@ -26,27 +26,27 @@
   animation-direction: reverse;
 }
 .pre-loader .loader-item:first-child {
-  animation-delay: -50ms;
+  animation-delay: -0.1s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(2) {
-  animation-delay: 0.2s;
+  animation-delay: 0.3s;
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(3) {
-  animation-delay: -0.6s;
+  animation-delay: -0.45s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(4) {
-  animation-delay: 0.4s;
+  animation-delay: 1s;
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(5) {
-  animation-delay: -0.5s;
+  animation-delay: -0.75s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(6) {
-  animation-delay: 0.3s;
+  animation-delay: 0.9s;
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(7) {
@@ -54,11 +54,11 @@
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(8) {
-  animation-delay: 2s;
+  animation-delay: 1.6s;
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(9) {
-  animation-delay: -0.9s;
+  animation-delay: -0.45s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(10) {
@@ -66,7 +66,7 @@
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(11) {
-  animation-delay: -0.55s;
+  animation-delay: -2.75s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(12) {
@@ -74,21 +74,57 @@
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(13) {
-  animation-delay: -0.65s;
+  animation-delay: -1.95s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(14) {
-  animation-delay: 0.7s;
+  animation-delay: 2.8s;
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(15) {
-  animation-delay: -3.75s;
+  animation-delay: -0.75s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(16) {
-  animation-delay: 1.6s;
+  animation-delay: 4s;
   animation-direction: reverse;
 }
+.pre-loader .loader-item:nth-child(17) {
+  animation-delay: -0.85s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(18) {
+  animation-delay: 1.8s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(19) {
+  animation-delay: -1.9s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(20) {
+  animation-delay: 5s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(21) {
+  animation-delay: -5.25s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(22) {
+  animation-delay: 4.4s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(23) {
+  animation-delay: -5.75s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(24) {
+  animation-delay: 4.8s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(25) {
+  animation-delay: -5s;
+  animation-direction: alternate;
+}
 .pre-loader .loader-item {
   animation: flickering 0.4s linear infinite alternate;
 }

apps/static/src/preloader.scss

@@ -0,0 +1,58 @@
+.pre-loader {
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+  .loader-item {
+    width: 10px;
+    height: 10px;
+    background: black;
+  }
+  .pre-loader-center {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+  .pre-loader-wrapper {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  @for $i from 0 through 25 {
+    .loader-item:nth-child(#{$i}) {
+      @if $i % 2 == 0 {
+        animation-delay: #{$i * 50 * random(5)}ms;
+        animation-direction: reverse;
+      } @else {
+        animation-delay: #{$i * -50 * random(5)}ms;
+        animation-direction: alternate;
+      }
+    }
+  }
+  .loader-item {
+    animation: flickering 0.4s linear alternate infinite;
+  }
+  @keyframes flickering {
+    0% {
+      opacity: 1;
+    }
+    25% {
+      opacity: 1;
+    }
+    26% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+html.dark {
+  .pre-loader {
+    .loader-item {
+      background: white;
+    }
+  }
+}

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -1,15 +1,18 @@
 import { MarketTradingModeMapping } from '@vegaprotocol/types';
 import { MarketState } from '@vegaprotocol/types';
 
-const marketInfoBtn = 'Info';
-const row = 'key-value-table-row';
-const marketTitle = 'accordion-title';
-const externalLink = 'external-link';
 const accordionContent = 'accordion-content';
+const blockExplorerLink = 'block-explorer-link';
+const dialogClose = 'dialog-close';
+const dialogContent = 'dialog-content';
+const externalLink = 'external-link';
+const githubLink = 'github-link';
+const liquidityLink = 'view-liquidity-link';
+const marketInfoBtn = 'Info';
+const marketTitle = 'accordion-title';
 const providerName = 'provider-name';
-const oracleBannerStatus = 'oracle-banner-status';
-const oracleBannerDialogTrigger = 'oracle-banner-dialog-trigger';
-const oracleFullProfile = 'oracle-full-profile';
+const row = 'key-value-table-row';
+const verifiedProofs = 'verified-proofs';
 
 describe('market info is displayed', { tags: '@smoke' }, () => {
   beforeEach(() => {
@@ -17,12 +20,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   before(() => {
-    cy.mockTradingPage(
-      MarketState.STATE_ACTIVE,
-      undefined,
-      undefined,
-      'COMPROMISED'
-    );
+    cy.mockTradingPage(MarketState.STATE_ACTIVE);
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');
     cy.wait('@Markets');
@@ -30,16 +28,8 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     cy.wait('@MarketInfo');
   });
 
-  it('show oracle banner', () => {
-    cy.getByTestId(marketTitle).contains('Oracle').click();
-    cy.getByTestId(oracleBannerStatus).should('contain.text', 'COMPROMISED');
-    cy.getByTestId(oracleBannerDialogTrigger)
-      .should('contain.text', 'Show more')
-      .click();
-    cy.getByTestId(oracleFullProfile).should('exist');
-  });
-
   it('current fees displayed', () => {
+    // 6002-MDET-101
     cy.getByTestId(marketTitle).contains('Current fees').click();
     validateMarketDataRow(0, 'Maker Fee', '0.02%');
     validateMarketDataRow(1, 'Infrastructure Fee', '0.05%');
@@ -48,6 +38,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   it('market price', () => {
+    // 6002-MDET-102
     cy.getByTestId(marketTitle).contains('Market price').click();
     validateMarketDataRow(0, 'Mark Price', '46,126.90058');
     validateMarketDataRow(1, 'Best Bid Price', '44,126.90058 ');
@@ -56,6 +47,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   it('market volume displayed', () => {
+    // 6002-MDET-103
     cy.getByTestId(marketTitle).contains('Market volume').click();
     validateMarketDataRow(1, 'Open Interest', '-');
     validateMarketDataRow(2, 'Best Bid Volume', '1');
@@ -65,11 +57,13 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   it('insurance pool displayed', () => {
+    // 6002-MDET-104
     cy.getByTestId(marketTitle).contains('Insurance pool').click();
     validateMarketDataRow(0, 'Balance', '0');
   });
 
   it('key details displayed', () => {
+    // 6002-MDET-201
     cy.getByTestId(marketTitle).contains('Key details').click();
 
     validateMarketDataRow(0, 'Name', 'BTCUSD Monthly (30 Jun 2022)');
@@ -85,6 +79,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   it('instrument displayed', () => {
+    // 6002-MDET-202
     cy.getByTestId(marketTitle).contains('Instrument').click();
 
     validateMarketDataRow(0, 'Market Name', 'BTCUSD Monthly (30 Jun 2022)');
@@ -93,7 +88,30 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     validateMarketDataRow(3, 'Quote Name', 'BTC');
   });
 
+  it('oracle displayed', () => {
+    // 6002-MDET-203
+    cy.getByTestId(marketTitle).contains('Oracle').click();
+
+    cy.getByTestId(accordionContent)
+      .getByTestId(providerName)
+      .and('contain', 'Another oracle');
+
+    cy.getByTestId(providerName).should('be.visible').click();
+    cy.getByTestId(dialogContent)
+      .eq(1)
+      .within(() => {
+        cy.getByTestId(blockExplorerLink).contains('Block explorer');
+        cy.getByTestId(githubLink).contains('Oracle repository');
+      });
+    cy.getByTestId(dialogClose).click();
+
+    cy.getByTestId(accordionContent)
+      .getByTestId(verifiedProofs)
+      .and('contain', '1');
+  });
+
   it('settlement asset displayed', () => {
+    // 6002-MDET-206
     cy.getByTestId(marketTitle).contains('Settlement asset').click();
     cy.window().then((win) => {
       cy.stub(win, 'prompt').returns('DISABLED WINDOW PROMPT');
@@ -112,9 +130,12 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     );
     validateMarketDataRow(8, 'Withdrawal threshold', '0.0005');
     validateMarketDataRow(9, 'Lifetime limit', '1,230');
+    validateMarketDataRow(10, 'Infrastructure fee account balance', '0.00001');
+    validateMarketDataRow(11, 'Global reward pool account balance', '0.00002');
   });
 
   it('metadata displayed', () => {
+    // 6002-MDET-207
     cy.getByTestId(marketTitle).contains('Metadata').click();
 
     validateMarketDataRow(0, 'Formerly', '076BB86A5AA41E3E');
@@ -125,18 +146,21 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   it('risk model displayed', () => {
+    // 6002-MDET-208
     cy.getByTestId(marketTitle).contains('Risk model').click();
     validateMarketDataRow(0, 'Tau', '0.0001140771161');
     validateMarketDataRow(1, 'Risk Aversion Parameter', '0.01');
   });
 
   it('risk parameters displayed', () => {
+    // 6002-MDET-209
     cy.getByTestId(marketTitle).contains('Risk parameters').click();
     validateMarketDataRow(0, 'R', '0.016');
     validateMarketDataRow(1, 'Sigma', '0.3');
   });
 
   it('risk factors displayed', () => {
+    // 6002-MDET-210
     cy.getByTestId(marketTitle).contains('Risk factors').click();
 
     validateMarketDataRow(0, 'Short', '0.008571790367285281');
@@ -144,6 +168,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   it('price monitoring bounds displayed', () => {
+    // 6002-MDET-211
     cy.getByTestId(marketTitle).contains('Price monitoring bounds 1').click();
     cy.get('p.col-span-1').contains('99.99999% probability price bounds');
     cy.get('p.col-span-1').contains('Within 43,200 seconds');
@@ -152,6 +177,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   it('liquidity monitoring parameters displayed', () => {
+    // 6002-MDET-212
     cy.getByTestId(marketTitle)
       .contains('Liquidity monitoring parameters')
       .click();
@@ -162,6 +188,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   it('liquidity displayed', () => {
+    // 6002-MDET-213
     cy.getByTestId(marketTitle)
       .contains(/Liquidity(?! m)/)
       .click();
@@ -169,14 +196,14 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     validateMarketDataRow(0, 'Target Stake', '10.00 tBTC');
     validateMarketDataRow(1, 'Supplied Stake', '0.01 tBTC');
     validateMarketDataRow(2, 'Market Value Proxy', '20.00 tBTC');
-
-    cy.getByTestId('view-liquidity-link').should(
+    cy.getByTestId(liquidityLink).should(
       'have.text',
       'View liquidity provision table'
     );
   });
 
   it('liquidity price range displayed', () => {
+    // 6002-MDET-214
     cy.getByTestId(marketTitle).contains('Liquidity price range').click();
 
     validateMarketDataRow(0, 'Liquidity Price Range', '2.00% of mid price');
@@ -184,29 +211,8 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     validateMarketDataRow(2, 'Highest Price', '47,049.438 BTC');
   });
 
-  it('oracle displayed', () => {
-    cy.getByTestId(marketTitle).contains('Oracle').click();
-
-    cy.getByTestId(accordionContent)
-      .getByTestId(providerName)
-      .and('contain', 'Another oracle');
-
-    cy.getByTestId(providerName).should('be.visible').click();
-
-    cy.getByTestId('dialog-content')
-      .eq(1)
-      .within(() => {
-        cy.getByTestId('block-explorer-link').contains('Block explorer');
-        cy.getByTestId('github-link').contains('Oracle repository');
-      });
-    cy.getByTestId('dialog-close').click();
-
-    cy.getByTestId(accordionContent)
-      .getByTestId('verified-proofs')
-      .and('contain', '1');
-  });
-
   it('proposal displayed', () => {
+    // 6002-MDET-301
     cy.getByTestId(marketTitle).contains('Proposal').click();
 
     cy.getByTestId(accordionContent)

apps/trading-e2e/src/integration/market-summary.cy.ts

@@ -1,17 +1,25 @@
 import * as Schema from '@vegaprotocol/types';
 
-const marketSummaryBlock = 'header-summary';
-const marketExpiry = 'market-expiry';
-const marketPrice = 'market-price';
-const marketChange = 'market-change';
-const marketVolume = 'market-volume';
-const marketMode = 'market-trading-mode';
-const marketState = 'market-state';
-const marketSettlement = 'market-settlement-asset';
-const percentageValue = 'price-change-percentage';
-const priceChangeValue = 'price-change';
+const expirtyTooltip = 'expiry-tooltip';
+const externalLink = 'external-link';
 const itemHeader = 'item-header';
 const itemValue = 'item-value';
+const link = 'link';
+const liquidityLink = 'view-liquidity-link';
+const liquiditySupplied = 'liquidity-supplied';
+const liquiditySuppliedTooltip = 'liquidity-supplied-tooltip';
+const marketChange = 'market-change';
+const marketExpiry = 'market-expiry';
+const marketMode = 'market-trading-mode';
+const marketName = 'header-title';
+const marketPrice = 'market-price';
+const marketSettlement = 'market-settlement-asset';
+const marketState = 'market-state';
+const marketSummaryBlock = 'header-summary';
+const marketVolume = 'market-volume';
+const percentageValue = 'price-change-percentage';
+const priceChangeValue = 'price-change';
+const tradingModeTooltip = 'trading-mode-tooltip';
 
 describe('Market trading page', () => {
   before(() => {
@@ -31,10 +39,12 @@ describe('Market trading page', () => {
     // 7002-SORD-001
     // 7002-SORD-002
     it('must display market name', () => {
-      cy.getByTestId('header-title').should('not.be.empty');
+      // 6002-MDET-001
+      cy.getByTestId(marketName).should('not.be.empty');
     });
 
     it('must see market expiry', () => {
+      // 6002-MDET-002
       cy.getByTestId(marketSummaryBlock).within(() => {
         cy.getByTestId(marketExpiry).within(() => {
           cy.getByTestId(itemHeader).should('have.text', 'Expiry');
@@ -44,6 +54,7 @@ describe('Market trading page', () => {
     });
 
     it('must see market price', () => {
+      // 6002-MDET-003
       cy.getByTestId(marketSummaryBlock).within(() => {
         cy.getByTestId(marketPrice).within(() => {
           cy.getByTestId(itemHeader).should('have.text', 'Price');
@@ -53,6 +64,7 @@ describe('Market trading page', () => {
     });
 
     it('must see market change', () => {
+      // 6002-MDET-004
       cy.getByTestId(marketSummaryBlock).within(() => {
         cy.getByTestId(marketChange).within(() => {
           cy.getByTestId(itemHeader).should('have.text', 'Change (24h)');
@@ -63,6 +75,7 @@ describe('Market trading page', () => {
     });
 
     it('must see market volume', () => {
+      // 6002-MDET-005
       cy.getByTestId(marketSummaryBlock).within(() => {
         cy.getByTestId(marketVolume).within(() => {
           cy.getByTestId(itemHeader).should('have.text', 'Volume (24h)');
@@ -72,16 +85,21 @@ describe('Market trading page', () => {
     });
 
     it('must see market mode', () => {
+      // 6002-MDET-006
       cy.getByTestId(marketSummaryBlock).within(() => {
         cy.getByTestId(marketMode).within(() => {
           cy.getByTestId(itemHeader).should('have.text', 'Trading mode');
-          cy.getByTestId(itemValue).should('not.be.empty');
+          cy.getByTestId(itemValue).should(
+            'have.text',
+            'Monitoring auction - liquidity (target not met)'
+          );
         });
       });
     });
 
-    it('must see market state', () => {
-      //7002-SORD-061
+    it('must see market status', () => {
+      // 6002-MDET-007
+      // 7002-SORD-061
       cy.getByTestId(marketSummaryBlock).within(() => {
         cy.getByTestId(marketState).within(() => {
           cy.getByTestId(itemHeader).should('have.text', 'Status');
@@ -91,6 +109,7 @@ describe('Market trading page', () => {
     });
 
     it('must see market settlement', () => {
+      // 6002-MDET-008
       cy.getByTestId(marketSummaryBlock).within(() => {
         cy.getByTestId(marketSettlement).within(() => {
           cy.getByTestId(itemHeader).should('have.text', 'Settlement asset');
@@ -98,15 +117,12 @@ describe('Market trading page', () => {
         });
       });
     });
-
-    it('must see market mode', () => {
+    it('must see market liquidity supplied', () => {
+      // 6002-MDET-009
       cy.getByTestId(marketSummaryBlock).within(() => {
-        cy.getByTestId(marketMode).within(() => {
-          cy.getByTestId(itemHeader).should('have.text', 'Trading mode');
-          cy.getByTestId(itemValue).should(
-            'have.text',
-            'Monitoring auction - liquidity (target not met)'
-          );
+        cy.getByTestId(liquiditySupplied).within(() => {
+          cy.getByTestId(itemHeader).should('have.text', 'Liquidity supplied');
+          cy.getByTestId(itemValue).should('not.be.empty');
         });
       });
     });
@@ -121,14 +137,14 @@ describe('Market trading page', () => {
             .realHover();
         });
       });
-      cy.getByTestId('expiry-tooltip')
+      cy.getByTestId(expirtyTooltip)
         .eq(0)
         .should(
           'contain.text',
           'This market expires when triggered by its oracle, not on a set date.'
         )
         .within(() => {
-          cy.getByTestId('link')
+          cy.getByTestId(link)
             .should('have.attr', 'href')
             .and('include', Cypress.env('EXPLORER_URL'));
         });
@@ -154,15 +170,14 @@ describe('Market trading page', () => {
             .realHover();
         });
       });
-
-      cy.getByTestId('trading-mode-tooltip')
+      cy.getByTestId(tradingModeTooltip)
         .should(
           'contain.text',
           'This market is in auction until it reaches sufficient liquidity.'
         )
         .eq(0)
         .within(() => {
-          cy.getByTestId('external-link')
+          cy.getByTestId(externalLink)
             .should('have.attr', 'href')
             .and('include', Cypress.env('TRADING_MODE_LINK'));
 
@@ -174,5 +189,27 @@ describe('Market trading page', () => {
           }
         });
     });
+
+    it('should see liquidity supplied tooltip', () => {
+      cy.getByTestId(marketSummaryBlock).within(() => {
+        cy.getByTestId(liquiditySupplied).within(() => {
+          cy.getByTestId(itemValue).realHover();
+        });
+      });
+      cy.getByTestId(liquiditySuppliedTooltip)
+        .should('contain.text', 'Supplied stake')
+        .and('contain.text', 'Target stake')
+        .first()
+        .within(() => {
+          cy.getByTestId(liquidityLink).should(
+            'have.text',
+            'View liquidity provision table'
+          );
+          cy.getByTestId(externalLink).should(
+            'have.text',
+            'Learn about providing liquidity'
+          );
+        });
+    });
   });
 });

apps/trading-e2e/src/integration/oracle.cy.ts

@@ -0,0 +1,27 @@
+import { MarketState } from '@vegaprotocol/types';
+
+const oracleBannerDialogTrigger = 'oracle-banner-dialog-trigger';
+const oracleBannerStatus = 'oracle-banner-status';
+const oracleFullProfile = 'oracle-full-profile';
+
+describe('oracle information', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockTradingPage(
+      MarketState.STATE_ACTIVE,
+      undefined,
+      undefined,
+      'COMPROMISED'
+    );
+    cy.mockSubscription();
+    cy.visit('/#/markets/market-0');
+    cy.wait('@Markets');
+  });
+
+  it('show oracle banner', () => {
+    cy.getByTestId(oracleBannerStatus).should('contain.text', 'COMPROMISED');
+    cy.getByTestId(oracleBannerDialogTrigger)
+      .should('contain.text', 'Show more')
+      .click();
+    cy.getByTestId(oracleFullProfile).should('exist');
+  });
+});

apps/trading/components/liquidity-supplied/liquidity-supplied.tsx

@@ -99,7 +99,7 @@ export const MarketLiquiditySupplied = ({
       AuctionTrigger.AUCTION_TRIGGER_UNABLE_TO_DEPLOY_LP_ORDERS;
 
   const description = marketId ? (
-    <section>
+    <section data-testid="liquidity-supplied-tooltip">
       <KeyValueTable>
         <KeyValueTableRow>
           <span>{t('Supplied stake')}</span>

libs/markets/src/lib/components/markets-container/market-list-table.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { addDecimalsFormatNumber, toBigNum } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type {
@@ -15,13 +15,13 @@ import {
   SetFilter,
 } from '@vegaprotocol/datagrid';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import { AgGridColumn } from 'ag-grid-react';
 import type { AgGridReact } from 'ag-grid-react';
 import * as Schema from '@vegaprotocol/types';
 import type { MarketMaybeWithData } from '../../markets-provider';
 import { MarketTableActions } from './market-table-actions';
 import { OracleStatus } from './oracle-status';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import type { ColDef } from 'ag-grid-community';
 
 const { MarketTradingMode, AuctionTrigger } = Schema;
 
@@ -58,41 +58,27 @@ export const MarketListTable = forwardRef<
   }
 >(({ onMarketClick, ...props }, ref) => {
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
-  return (
-    <AgGrid
-      style={{ width: '100%', height: '100%' }}
-      getRowId={getRowId}
-      ref={ref}
-      defaultColDef={{
-        resizable: true,
-        sortable: true,
-        filter: true,
-        filterParams: { buttons: ['reset'] },
-        minWidth: 100,
-      }}
-      suppressCellFocus
-      components={{ PriceFlashCell, MarketName }}
-      storeKey="allMarkets"
-      {...props}
-    >
-      <AgGridColumn
-        headerName={t('Market')}
-        field="tradableInstrument.instrument.code"
-        cellRenderer="MarketName"
-        cellRendererParams={{ onMarketClick }}
-      />
-      <AgGridColumn
-        headerName={t('Description')}
-        field="tradableInstrument.instrument.name"
-      />
-      <AgGridColumn
-        headerName={t('Trading mode')}
-        field="tradingMode"
-        minWidth={170}
-        valueFormatter={({
+
+  const coldefs = useMemo(() => {
+    const defs: ColDef[] = [
+      {
+        headerName: t('Market'),
+        field: 'tradableInstrument.instrument.code',
+        cellRenderer: 'MarketName',
+        cellRendererParams: { onMarketClick },
+      },
+      {
+        headerName: t('Description'),
+        field: 'tradableInstrument.instrument.name',
+      },
+      {
+        headerName: t('Trading mode'),
+        field: 'tradingMode',
+        minWidth: 170,
+        valueFormatter: ({
           data,
         }: VegaValueFormatterParams<MarketMaybeWithData, 'data'>) => {
-          if (!data?.data) return undefined;
+          if (!data?.data) return '-';
           const { trigger, marketTradingMode } = data.data;
           return marketTradingMode ===
             MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
@@ -101,59 +87,58 @@ export const MarketListTable = forwardRef<
             ? `${Schema.MarketTradingModeMapping[marketTradingMode]}
             - ${Schema.AuctionTriggerMapping[trigger]}`
             : Schema.MarketTradingModeMapping[marketTradingMode];
-        }}
-        filter={SetFilter}
-        filterParams={{
+        },
+        filter: SetFilter,
+        filterParams: {
           set: Schema.MarketTradingModeMapping,
-        }}
-      />
-      <AgGridColumn
-        headerName={t('Status')}
-        field="state"
-        valueFormatter={({
+        },
+      },
+      {
+        headerName: t('Status'),
+        field: 'state',
+        valueFormatter: ({
           data,
         }: VegaValueFormatterParams<MarketMaybeWithData, 'state'>) => {
           return data?.state ? Schema.MarketStateMapping[data.state] : '-';
-        }}
-        filter={SetFilter}
-        filterParams={{
+        },
+        filter: SetFilter,
+        filterParams: {
           set: Schema.MarketStateMapping,
-        }}
-      />
-      <AgGridColumn
-        headerName={t('Best bid')}
-        field="data.bestBidPrice"
-        type="rightAligned"
-        cellRenderer="PriceFlashCell"
-        filter="agNumberColumnFilter"
-        valueGetter={({
+        },
+      },
+      {
+        headerName: t('Best bid'),
+        field: 'data.bestBidPrice',
+        type: 'rightAligned',
+        cellRenderer: 'PriceFlashCell',
+        filter: 'agNumberColumnFilter',
+        valueGetter: ({
           data,
         }: VegaValueGetterParams<MarketMaybeWithData, 'data.bestBidPrice'>) => {
           return data?.data?.bestBidPrice === undefined
             ? undefined
             : toBigNum(data?.data?.bestBidPrice, data.decimalPlaces).toNumber();
-        }}
-        valueFormatter={({
+        },
+        valueFormatter: ({
           data,
         }: VegaValueFormatterParams<
           MarketMaybeWithData,
           'data.bestBidPrice'
         >) =>
           data?.data?.bestBidPrice === undefined
-            ? undefined
+            ? '-'
             : addDecimalsFormatNumber(
                 data.data.bestBidPrice,
                 data.decimalPlaces
-              )
-        }
-      />
-      <AgGridColumn
-        headerName={t('Best offer')}
-        field="data.bestOfferPrice"
-        type="rightAligned"
-        cellRenderer="PriceFlashCell"
-        filter="agNumberColumnFilter"
-        valueGetter={({
+              ),
+      },
+      {
+        headerName: t('Best offer'),
+        field: 'data.bestOfferPrice',
+        type: 'rightAligned',
+        cellRenderer: 'PriceFlashCell',
+        filter: 'agNumberColumnFilter',
+        valueGetter: ({
           data,
         }: VegaValueGetterParams<
           MarketMaybeWithData,
@@ -165,46 +150,44 @@ export const MarketListTable = forwardRef<
                 data?.data?.bestOfferPrice,
                 data.decimalPlaces
               ).toNumber();
-        }}
-        valueFormatter={({
+        },
+        valueFormatter: ({
           data,
         }: VegaValueFormatterParams<
           MarketMaybeWithData,
           'data.bestOfferPrice'
         >) =>
           data?.data?.bestOfferPrice === undefined
-            ? undefined
+            ? '-'
             : addDecimalsFormatNumber(
                 data.data.bestOfferPrice,
                 data.decimalPlaces
-              )
-        }
-      />
-      <AgGridColumn
-        headerName={t('Mark price')}
-        field="data.markPrice"
-        type="rightAligned"
-        cellRenderer="PriceFlashCell"
-        filter="agNumberColumnFilter"
-        valueGetter={({
+              ),
+      },
+      {
+        headerName: t('Mark price'),
+        field: 'data.markPrice',
+        type: 'rightAligned',
+        cellRenderer: 'PriceFlashCell',
+        filter: 'agNumberColumnFilter',
+        valueGetter: ({
           data,
         }: VegaValueGetterParams<MarketMaybeWithData, 'data.markPrice'>) => {
           return data?.data?.markPrice === undefined
             ? undefined
             : toBigNum(data?.data?.markPrice, data.decimalPlaces).toNumber();
-        }}
-        valueFormatter={({
+        },
+        valueFormatter: ({
           data,
         }: VegaValueFormatterParams<MarketMaybeWithData, 'data.markPrice'>) =>
           data?.data?.bestOfferPrice === undefined
-            ? undefined
-            : addDecimalsFormatNumber(data.data.markPrice, data.decimalPlaces)
-        }
-      />
-      <AgGridColumn
-        headerName={t('Settlement asset')}
-        field="tradableInstrument.instrument.product.settlementAsset.symbol"
-        cellRenderer={({
+            ? '-'
+            : addDecimalsFormatNumber(data.data.markPrice, data.decimalPlaces),
+      },
+      {
+        headerName: t('Settlement asset'),
+        field: 'tradableInstrument.instrument.product.settlementAsset.symbol',
+        cellRenderer: ({
           data,
         }: VegaICellRendererParams<
           MarketMaybeWithData,
@@ -223,13 +206,13 @@ export const MarketListTable = forwardRef<
           ) : (
             ''
           );
-        }}
-      />
-      <AgGridColumn
-        colId="market-actions"
-        field="id"
-        {...COL_DEFS.actions}
-        cellRenderer={({
+        },
+      },
+      {
+        colId: 'market-actions',
+        field: 'id',
+        ...COL_DEFS.actions,
+        cellRenderer: ({
           data,
         }: VegaICellRendererParams<MarketMaybeWithData>) => {
           if (!data) return null;
@@ -241,9 +224,31 @@ export const MarketListTable = forwardRef<
               }
             />
           );
-        }}
-      />
-    </AgGrid>
+        },
+      },
+    ];
+
+    return defs;
+  }, [onMarketClick, openAssetDetailsDialog]);
+
+  return (
+    <AgGrid
+      style={{ width: '100%', height: '100%' }}
+      getRowId={getRowId}
+      ref={ref}
+      defaultColDef={{
+        resizable: true,
+        sortable: true,
+        filter: true,
+        filterParams: { buttons: ['reset'] },
+        minWidth: 100,
+      }}
+      columnDefs={coldefs}
+      suppressCellFocus
+      components={{ PriceFlashCell, MarketName }}
+      storeKey="allMarkets"
+      {...props}
+    />
   );
 });
 

libs/ui-toolkit/src/components/loader/loader.module.scss

@@ -1,4 +1,4 @@
-@for $i from 0 through 16 {
+@for $i from 0 through 25 {
   .loader-item:nth-child(#{$i}) {
     @if $i % 2 == 0 {
       animation-delay: #{$i * 50 * random(5)}ms;

libs/ui-toolkit/src/components/loader/loader.tsx

@@ -25,7 +25,7 @@ export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
   });
   const wrapperClasses =
     size === 'small' ? 'w-[15px] h-[15px]' : 'w-[50px] h-[50px]';
-  const items = size === 'small' ? 9 : 16;
+  const items = size === 'small' ? 9 : 25;
 
   const generate = useMemo(() => pseudoRandom(1), []);