I am using React Virtuoso to create a virtual list. First, I'll explain the scenario in which I use React Virtuoso. Then, I'll outline my problem and explain how it is related to React Virtuoso. Finally, I'll include a CodeSandbox to better simulate my issue
use scenario: I have a track list, and I obtain this list from an API. I display a shimmer until I receive the API call response and then I display my list. For displaying this list I use React Virtuoso. I cant set a fixed height to my list and It has an auto height.
problem: When the shimmer disappears and the list should be displayed, there is a delay between them. I believe it's related to the way React Virtuoso works, and in my case, it causes a jump on my page. This delay is around 100ms or less but it results in an undesirable jump, causing a poor user experience.
First, I create a CodeSandbox out of my project to test the process of rendering in two different situations. The first one has a normal list, and the other one uses React Virtuoso for rendering the list.
After that, I open Chrome DevTools and its performance tab. Then, I record each list's rendering process. In the pure list, there isn't any delay between the shimmer disappearing and the list being displayed. However, in the list rendered with React Virtuoso, there is a delay You can observe the Virtuoso list jumping in this Code Sandbox. link to code example