feat: add isScrollingResetDelay option to Virtualizer

[piecyk]

No description provided.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d7d7111. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx affected --targets=test:format,test:sherif,test:knip,test:lib,test:types,test:build,build

---

Sent with 💌 from NxCloud.

[kieranm]

Thanks for this!

[kieranm]

Hey @piecyk

The code below doesn't seem to work because isScrollingResetDelay does not get updated with the new value after the effect runs (the virtualizer still thinks it's undefined)

  // State to detect if the current browser is Safari
  const [safari, setSafari] = useState(false)

  // Effect to check if the browser is Safari upon component mount
  useEffect(() => {
    setSafari(
      typeof window !== "undefined" &&
        Boolean((window as unknown as { safari: object }).safari),
    )
  }, [])

  const virtualizer = useVirtualizer({
    count: COUNT,
    getScrollElement,
    estimateSize: useCallback((index) => sizes[index], [sizes]),
    horizontal: true,
    initialOffset: 0,
    initialRect: { width: 2500, height: 2500 },
    overscan: 3,
    isScrollingResetDelay: safari ? 1100 : undefined,
  })

This code does work but it causes the whole virtualizer to re-initialize which causes a flicker on and off.

  const virtualizer = useVirtualizer({
    count: COUNT,
    getScrollElement,
    estimateSize: useCallback((index) => sizes[index], [sizes]),
    horizontal: true,
    initialOffset: 0,
    initialRect: { width: 2500, height: 2500 },
    overscan: 3,
  })

  // Effect to check if the browser is Safari upon component mount
  useEffect(() => {
    const isSafari =
      typeof window !== "undefined" &&
      Boolean((window as unknown as { safari: object }).safari)
    if (isSafari) {
      virtualizer.setOptions({
        ...virtualizer.options,
        isScrollingResetDelay: 1000,
      })
    }
  }, [])

Do you know how I can get the virtualizer to get the correct value without re-initializing? Thanks!

[piecyk]

Hey @piecyk

The code below doesn't seem to work because isScrollingResetDelay does not get updated with the new value after the effect runs (the virtualizer still thinks it's undefined)

  // State to detect if the current browser is Safari
  const [safari, setSafari] = useState(false)

  // Effect to check if the browser is Safari upon component mount
  useEffect(() => {
    setSafari(
      typeof window !== "undefined" &&
        Boolean((window as unknown as { safari: object }).safari),
    )
  }, [])

  const virtualizer = useVirtualizer({
    count: COUNT,
    getScrollElement,
    estimateSize: useCallback((index) => sizes[index], [sizes]),
    horizontal: true,
    initialOffset: 0,
    initialRect: { width: 2500, height: 2500 },
    overscan: 3,
    isScrollingResetDelay: safari ? 1100 : undefined,
  })

This code does work but it causes the whole virtualizer to re-initialize which causes a flicker on and off.

  const virtualizer = useVirtualizer({
    count: COUNT,
    getScrollElement,
    estimateSize: useCallback((index) => sizes[index], [sizes]),
    horizontal: true,
    initialOffset: 0,
    initialRect: { width: 2500, height: 2500 },
    overscan: 3,
  })

  // Effect to check if the browser is Safari upon component mount
  useEffect(() => {
    const isSafari =
      typeof window !== "undefined" &&
      Boolean((window as unknown as { safari: object }).safari)
    if (isSafari) {
      virtualizer.setOptions({
        ...virtualizer.options,
        isScrollingResetDelay: 1000,
      })
    }
  }, [])

Do you know how I can get the virtualizer to get the correct value without re-initializing? Thanks!

I see the issue, i think you can lift the safari up to global context as a method, then you don't really need an effect and ssr hydration should also work correctly

const isSafari = () =>
  typeof window !== 'undefined' &&
  Boolean((window as unknown as { safari: object }).safari)

const Foo () => {
  const virtualizer = useVirtualizer({
    count: COUNT,
    getScrollElement,
    estimateSize: useCallback((index) => sizes[index], [sizes]),
    horizontal: true,
    initialOffset: 0,
    initialRect: { width: 2500, height: 2500 },
    overscan: 3,
    isScrollingResetDelay: isSafari() ? 1100 : undefined,
  })
}