UI5 / webcomponents-react / 23536199118

85%

main: 85%

Build Type

push

github

Committed by web-flow

Commit Message

fix(AnalyticalTable): prevent empty table body flash on first render (#8375)

## Description

When an `AnalyticalTable` with `visibleRowCountMode="Auto"` mounts,
there is a brief but visible flash where the table headers and toolbar
are fully rendered while the body area is empty. After a frame the rows
appear, but the flicker is noticeable — especially in applications where
the table is rendered inside a layout that itself triggers re-layouts on
mount (e.g. an `ObjectPage` with `IconTabBar` mode).

### Root cause

`VirtualTableBodyContainer` needs the body `<div>` to be in the DOM
before the virtualizer can measure it and render rows. To enforce this,
it gates the row children behind an `isMounted` flag:

```tsx
const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
  if (parentRef.current) {
    setIsMounted(true);
  }
}, [parentRef]);

// later in JSX:
{isMounted && children}
```

The problem is the choice of `useEffect`. React's `useEffect` runs
**after** the browser paints, which means every mount follows this
sequence:

1. React commits the component tree to the DOM — the body `<div
ref={parentRef}>` is in the document, but `isMounted` is still `false`,
so `children` (the rows) are not part of the tree.
2. The **browser paints** this state — the user sees a complete table
frame with an empty body.
3. Only now does `useEffect` fire, finding `parentRef.current` set and
calling `setIsMounted(true)`.
4. React re-renders with the rows included, the browser paints again —
the table is now complete.

Step 2 is the flash. It is a single frame, but it is consistently
reproducible on every mount.

### Fix

Replace `useEffect` with `useLayoutEffect`. Because `useLayoutEffect`
runs synchronously after DOM mutations but **before** the browser
paints, the ref check and state update happen in time for React to
include the rows in the very first paint. The user never sees an empty
body.

### Why this is safe

- `parentRef.current` is guaranteed t... (continued)

Run Details

3510 of 4500 branches covered (78.0%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

2 existing lines in 1 file now uncovered.

6519 of 7329 relevant lines covered (88.95%)

120677.41 hits per line