chore(orders): fix order table rows flickering on filter change (#3088)

libs/datagrid/src/lib/filters/set-filter.tsx

@@ -61,10 +61,9 @@ export const SetFilter = forwardRef((props: IFilterParams, ref) => {
     <div className="ag-filter-body-wrapper">
       <fieldset className="ag-simple-filter-body-wrapper">
         {Object.keys(props.colDef.filterParams.set).map((key) => (
-          <label className="flex">
+          <label className="flex" key={key}>
             <input
               type="checkbox"
-              key={key}
               value={key}
               className="mr-1"
               checked={value.includes(key)}

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -1,7 +1,7 @@
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { truncateByChars } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import type {
   BodyScrollEvent,
   BodyScrollEndEvent,
@@ -98,38 +98,60 @@ export const OrderListManager = ({
       scrolledToTop,
     });
 
-  const onBodyScrollEnd = (event: BodyScrollEndEvent) => {
+  const onBodyScrollEnd = useCallback(
-    if (event.top === 0) {
+    (event: BodyScrollEndEvent) => {
-      addNewRows();
+      if (event.top === 0) {
-    }
+        addNewRows();
-  };
+      }
+    },
+    [addNewRows]
+  );
 
-  const onBodyScroll = (event: BodyScrollEvent) => {
+  const onBodyScroll = useCallback((event: BodyScrollEvent) => {
     scrolledToTop.current = event.top <= 0;
-  };
+  }, []);
 
-  const onFilterChanged = (event: FilterChangedEvent) => {
+  const onFilterChanged = useCallback(
-    const updatedFilter = event.api.getFilterModel();
+    (event: FilterChangedEvent) => {
-    if (Object.keys(updatedFilter).length) {
+      const updatedFilter = event.api.getFilterModel();
-      setFilter(updatedFilter);
+      if (Object.keys(updatedFilter).length) {
-    } else if (filter) {
+        setFilter(updatedFilter);
-      setFilter(undefined);
+      } else {
-    }
+        setFilter(undefined);
-  };
+      }
+    },
+    [setFilter]
+  );
 
-  const onSortChange = (event: SortChangedEvent) => {
+  const onSortChange = useCallback(
-    const sort = event.columnApi
+    (event: SortChangedEvent) => {
-      .getColumnState()
+      const sort = event.columnApi
-      .sort((a, b) => (a.sortIndex || 0) - (b.sortIndex || 0))
+        .getColumnState()
-      .reduce((acc, col) => {
+        .sort((a, b) => (a.sortIndex || 0) - (b.sortIndex || 0))
-        if (col.sort) {
+        .reduce((acc, col) => {
-          const { colId, sort } = col;
+          if (col.sort) {
-          acc.push({ colId, sort });
+            const { colId, sort } = col;
-        }
+            acc.push({ colId, sort });
-        return acc;
+          }
-      }, [] as { colId: string; sort: string }[]);
+          return acc;
-    setSort(sort.length > 0 ? sort : undefined);
+        }, [] as { colId: string; sort: string }[]);
-  };
+      setSort(sort.length > 0 ? sort : undefined);
+    },
+    [setSort]
+  );
+
+  const onCancel = useCallback(
+    (order: Order) => {
+      if (!order.market) return;
+      create({
+        orderCancellation: {
+          orderId: order.id,
+          marketId: order.market.id,
+        },
+      });
+    },
+    [create]
+  );
 
   return (
     <>
@@ -143,15 +165,7 @@ export const OrderListManager = ({
             onBodyScroll={onBodyScroll}
             onFilterChanged={onFilterChanged}
             onSortChanged={onSortChange}
-            cancel={(order: Order) => {
+            cancel={onCancel}
-              if (!order.market) return;
-              create({
-                orderCancellation: {
-                  orderId: order.id,
-                  marketId: order.market.id,
-                },
-              });
-            }}
             setEditOrder={setEditOrder}
             onMarketClick={onMarketClick}
             isReadOnly={isReadOnly}

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -91,6 +91,9 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
             data,
             node,
           }: VegaValueFormatterParams<Order, 'size'>) => {
+            if (!data) {
+              return undefined;
+            }
             if (!data?.market || !isNumeric(value)) {
               return '-';
             }
@@ -116,6 +119,9 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
             value,
             node,
           }: VegaValueFormatterParams<Order, 'type'>) => {
+            if (!order) {
+              return undefined;
+            }
             if (!value) return '-';
             if (order?.peggedOrder) return t('Pegged');
             if (order?.liquidityProvision) return t('Liquidity provision');
@@ -162,6 +168,9 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
             value,
             node,
           }: VegaValueFormatterParams<Order, 'remaining'>) => {
+            if (!data) {
+              return undefined;
+            }
             if (!data?.market || !isNumeric(value) || !isNumeric(data.size)) {
               return '-';
             }
@@ -184,6 +193,9 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
             data,
             node,
           }: VegaValueFormatterParams<Order, 'price'>) => {
+            if (!data) {
+              return undefined;
+            }
             if (
               !data?.market ||
               data.type === Schema.OrderType.TYPE_MARKET ||
@@ -237,6 +249,9 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
             data,
             value,
           }: VegaICellRendererParams<Order, 'updatedAt'>) => {
+            if (!data) {
+              return undefined;
+            }
             return (
               <span data-value={value}>
                 {value ? getDateTimeFormat().format(new Date(value)) : '-'}