fix: recompute row heights when new items are appended to DataList (#116

)

src/components/Executions/Tables/WorkflowExecutionsTable.tsx

@@ -239,7 +239,7 @@ export const WorkflowExecutionsTable: React.FC<WorkflowExecutionsTableProps> = p
     const listRef = React.useRef<DataListRef>(null);
 
     // Reset error expansion states whenever list changes
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         setExpandedErrors({});
     }, [executions]);
 

src/components/Tables/DataList.tsx

@@ -69,37 +69,55 @@ const DataListImplComponent: React.RefForwardingComponent<
     DataListRef,
     DataListImplProps
 > = (props, ref) => {
+    const {
+        height,
+        value: items,
+        lastError,
+        state,
+        moreItemsAvailable,
+        onScrollbarPresenceChange,
+        noRowsContent: NoRowsContent = 'No items found.',
+        rowContentRenderer,
+        width
+    } = props;
+
     const styles = useStyles();
+    const theme = useTheme<Theme>();
+    const lengthRef = React.useRef<number>(0);
     const listRef = React.useRef<List>(null);
     /** We want the cache to persist across renders, which useState will do.
      * But we also don't want to be needlessly creating new caches that are
      * thrown away immediately. So we're using a creation function which useState
      * will call to create the initial value.
      */
     const [cellCache] = React.useState(createCellMeasurerCache);
-    const theme = useTheme<Theme>();
-    React.useImperativeHandle(ref, () => ({
-        recomputeRowHeights: (rowIndex: number) => {
+
+    const recomputeRow = React.useMemo(
+        () => (rowIndex: number) => {
             cellCache.clear(rowIndex, 0);
             if (listRef.current !== null) {
                 listRef.current.recomputeRowHeights(rowIndex);
             }
+        },
+        [cellCache, listRef]
+    );
+    React.useImperativeHandle(
+        ref,
+        () => ({
+            recomputeRowHeights: recomputeRow
+        }),
+        [recomputeRow]
+    );
+
+    React.useLayoutEffect(() => {
+        if (lengthRef.current >= 0 && items.length > lengthRef.current) {
+            recomputeRow(lengthRef.current);
         }
-    }));
+        lengthRef.current = props.value.length;
+    }, [items.length]);
 
     const headerHeight = theme.spacing(headerGridHeight);
     const listPadding = theme.spacing(tableGridPadding);
-    const {
-        height,
-        value: items,
-        lastError,
-        state,
-        moreItemsAvailable,
-        onScrollbarPresenceChange,
-        noRowsContent: NoRowsContent = 'No items found.',
-        rowContentRenderer,
-        width
-    } = props;
     const showLoadMore = items.length && moreItemsAvailable;
 
     // We want the "load more" content to render at the end of the list.