diff --git a/apps/trading/client-pages/market/market-selector.tsx b/apps/trading/client-pages/market/market-selector.tsx index b5ef9d810..1e6e34204 100644 --- a/apps/trading/client-pages/market/market-selector.tsx +++ b/apps/trading/client-pages/market/market-selector.tsx @@ -8,7 +8,7 @@ import { VegaIconNames, } from '@vegaprotocol/ui-toolkit'; import type { CSSProperties } from 'react'; -import { useState } from 'react'; +import { useCallback, useState, useMemo } from 'react'; import { Link } from 'react-router-dom'; import { FixedSizeList } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; @@ -184,7 +184,6 @@ const MarketList = ({ if (error) { return
{error.message}
; } - return ( {({ width, height }) => ( @@ -204,6 +203,29 @@ const MarketList = ({ ); }; +interface ListItemData { + data: MarketMaybeWithDataAndCandles[]; + onSelect?: (marketId: string) => void; + currentMarketId?: string; +} + +const ListItem = ({ + index, + style, + data, +}: { + index: number; + style: CSSProperties; + data: ListItemData; +}) => ( + +); + const List = ({ data, loading, @@ -212,28 +234,20 @@ const List = ({ onSelect, noItems, currentMarketId, -}: { - data: MarketMaybeWithDataAndCandles[]; +}: ListItemData & { loading: boolean; width: number; height: number; noItems: string; - onSelect?: (marketId: string) => void; - currentMarketId?: string; }) => { - const row = ({ index, style }: { index: number; style: CSSProperties }) => { - const market = data[index]; - - return ( - - ); - }; - + const itemKey = useCallback( + (index: number, data: ListItemData) => data.data[index].id, + [] + ); + const itemData = useMemo( + () => ({ data, onSelect, currentMarketId }), + [data, onSelect, currentMarketId] + ); if (!data || loading) { return (
@@ -259,11 +273,13 @@ const List = ({ - {row} + {ListItem} ); };