feat: readyStateChanged for VirtuosoGrid

examples/grid.tsx

@@ -77,3 +77,24 @@ export function Example() {
     </>
   )
 }
+
+export function ReadyStateChanged() {
+  const ref = React.createRef<VirtuosoGridHandle>()
+  const [gridVisible, setGridVisible] = React.useState(false)
+
+  return (
+    <>
+      <VirtuosoGrid
+        ref={ref}
+        readyStateChanged={setGridVisible}
+        components={{
+          Item: ItemContainer,
+          List: ListContainer,
+        }}
+        totalCount={100}
+        itemContent={(index) => <ItemWrapper>Item {index}</ItemWrapper>}
+        style={{ height: 300, width: 1200, visibility: gridVisible ? 'visible' : 'hidden' }}
+      />
+    </>
+  )
+}

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<GridItemContent<any, any>>((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

src/component-interfaces/VirtuosoGrid.ts

@@ -152,6 +152,11 @@ export interface VirtuosoGridProps<D, C = unknown> 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 {