Doesn't render all items on first paint

[paulm17]

Describe the bug Using the same code as the example:

Render a Masonry component relative to a scrollable HTML element rather than the browser window.

Upon init, not all the items are rendered. The component needs to be interacted with.

To Reproduce See loom:

https://www.loom.com/share/5beff09f71c3433cb6bd55648fa1c5ae

Expected behavior All nodes should render initially

Here is my code:

const parentVisible = explorer.parentId !== null ? true : false
  const parentRef = useRef<HTMLDivElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  //const { width, height } = useSize(containerRef)

  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  const getWidth = useCallback(() => {
    if (containerRef.current) {
      setWidth(containerRef.current.getBoundingClientRect().width)
    }
  }, [])

  const getHeight = useCallback(() => {
    if (containerRef.current) {
      setHeight(containerRef.current.getBoundingClientRect().height)
    }
  }, [])

  const { scrollTop, isScrolling } = useScroller(containerRef)
  const positioner = usePositioner({
    width,
    columnWidth: explorer.view.grid.thumbSize,
    columnGutter: 8,
  })
  const resizeObserver = useResizeObserver(positioner)
  const FakeGridItem = ({ data }) => {
    return (
      <GridItem
        index={index}
        item={data}
        selected={selected}
        onClick={onClick}
        onDoubleClick={onDoubleClick}
        genImage={genImage}
        canSelect={canSelect}
        onSelect={onSelect}
        genType={genType}
        genIcon={genIcon}
        storeSet={storeSet}
        saveDB={saveDB}
      />
    )
  }

  useEffect(() => {
    getWidth()
    getHeight()
  }, [view, getWidth, getHeight])

  return (
    <>
      <div className="flex flex-col max-h-screen w-full overflow-hidden">
        {parentVisible && <ParentFolder index={index} parentId={parentId} />}
        <div ref={containerRef} className="h-[calc(100vh-80px)] overflow-auto w-full">
          {useMasonry({
            positioner,
            resizeObserver,
            items: files,
            height,
            scrollTop,
            isScrolling,
            overscanBy: 1.25,
            render: FakeGridItem
          })}
        </div>
        {!dndData.isEnabled && <DragLayer />}
      </div>
    </>
  )

[gemilangpermata]

how do you fix this?

[paulm17]

@gemilangpermata I moved to using react-window.

[jaredLunde]

Yeah i'm not a support line, sorry. Glad you found something that worked for your case!