diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx index 6b94d9928e8..3eb33f812b5 100644 --- a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx +++ b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx @@ -1,4 +1,4 @@ -import { enrichEventWithDetails } from '@ui5/webcomponents-react-base'; +import { enrichEventWithDetails, useIsomorphicLayoutEffect } from '@ui5/webcomponents-react-base'; import { clsx } from 'clsx'; import type { MutableRefObject } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react'; @@ -46,9 +46,9 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps) } = props; const [isMounted, setIsMounted] = useState(false); - useEffect(() => { + useIsomorphicLayoutEffect(() => { if (parentRef.current) { - // Trigger one-time re-render after first render -> safe to set state here + // Run before paint so rows appear with the body container (avoids empty-body flash). // eslint-disable-next-line react-hooks/set-state-in-effect setIsMounted(true); }