diff --git a/examples/grid.tsx b/examples/grid.tsx index deed604f3..89273d12a 100644 --- a/examples/grid.tsx +++ b/examples/grid.tsx @@ -77,3 +77,24 @@ export function Example() { ) } + +export function ReadyStateChanged() { + const ref = React.createRef() + const [gridVisible, setGridVisible] = React.useState(false) + + return ( + <> + Item {index}} + style={{ height: 300, width: 1200, visibility: gridVisible ? 'visible' : 'hidden' }} + /> + + ) +} diff --git a/src/VirtuosoGrid.tsx b/src/VirtuosoGrid.tsx index 59c363868..eb89fc47f 100644 --- a/src/VirtuosoGrid.tsx +++ b/src/VirtuosoGrid.tsx @@ -11,6 +11,7 @@ import { Log, LogLevel } from './loggerSystem' import { VirtuosoGridHandle, VirtuosoGridProps } from './component-interfaces/VirtuosoGrid' import { correctItemSize } from './utils/correctItemSize' import { VirtuosoGridMockContext } from './utils/context' +import useIsomorphicLayoutEffect from './hooks/useIsomorphicLayoutEffect' const gridComponentPropsSystem = /*#__PURE__*/ u.system(() => { const itemContent = u.statefulStream>((index) => `Item ${index}`) @@ -33,7 +34,10 @@ const gridComponentPropsSystem = /*#__PURE__*/ u.system(() => { ) } + const readyStateChanged = u.statefulStream(false) + return { + readyStateChanged, context, itemContent, components, @@ -71,6 +75,7 @@ const GridItems: React.FC = /*#__PURE__*/ React.memo(function GridItems() { const gridGap = usePublisher('gap') const log = useEmitterValue('log') const stateRestoreInProgress = useEmitterValue('stateRestoreInProgress') + const reportReadyState = usePublisher('readyStateChanged') const listRef = useSize( React.useMemo( @@ -97,7 +102,11 @@ const GridItems: React.FC = /*#__PURE__*/ React.memo(function GridItems() { return null } - // console.log('rendering items', gridState.items) + useIsomorphicLayoutEffect(() => { + if (gridState.itemHeight > 0 && gridState.itemWidth > 0) { + reportReadyState(true) + } + }, [gridState]) return React.createElement( ListComponent, @@ -266,6 +275,7 @@ const { atBottomStateChange: 'atBottomStateChange', atTopStateChange: 'atTopStateChange', stateChanged: 'stateChanged', + readyStateChanged: 'readyStateChanged', }, }, GridRoot diff --git a/src/component-interfaces/VirtuosoGrid.ts b/src/component-interfaces/VirtuosoGrid.ts index 98a52f322..e12d8d349 100644 --- a/src/component-interfaces/VirtuosoGrid.ts +++ b/src/component-interfaces/VirtuosoGrid.ts @@ -152,6 +152,11 @@ export interface VirtuosoGridProps extends GridRootProps { * Pass in an object to achieve additional effects similar to `scrollToIndex`. */ initialTopMostItemIndex?: GridIndexLocation + + /** + * invoked with true after the grid has done the initial render and the items have been measured. + */ + readyStateChanged?: (ready: boolean) => void } export interface VirtuosoGridHandle {