[Bug]: Visual Issue on GroupedList PCF Control

[atnilishe]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 2.05 GB / 15.40 GB
  Browsers:
    Edge: Chromium (120.0.2210.121)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://codepen.io/Artem-Timoshyn/pen/qBvaQLV

Bug Description

Actual Behavior

In a situation when the user scrolls a grid that displays grouped data and has an expanded group/groups with a large number of records, the grid does not draw all the data (it is likely that it does not have time to draw) and after a certain number of drawn lines it displays a white screen that always remains such.
Additionally, if you scroll down immediately or quickly scroll to the end, the grid starts to "jump".

Expected Behavior

The data is evenly rendered during scrolling; the grid with data does not jump.

Logs

No response

Requested priority

Normal

Products/sites affected

GroupedList basic example https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[spmonahan]

@atnilishe Please try using GroupedListV2 for this as it addresses the virtualization issue you are demonstrating in your repro case. More details on GroupedListV2 are available in the PR that merges it.

[atnilishe]

Thank you, everything is working