Scroll to the component where the document is modified is not consistent

[gitajay]

Facing a minor issue which is related to scroll. Once the preview get loaded and hippo-overlay painted. We modified a component document which makes the page to reload. Consider the component is in the mid of the 50+ components. So the page to scroll to that component after it loads. But this is not consistent. It scrolls to a different component sometimes. All the components are async, so is that the reason that the scroll set and async components rendered after it? How can we overcome this for a consistent behaviour?

[beetlerom]

@gitajay Thanks for reporting this issue!

After diving into this, we have reasons to suspect that there is a race condition that is only highlighted with a very large number of components.

Do you mind creating an Issue from this? I will then tag it and pick it up for v28.0.1

Thank you!

[lachire]

Yes page.sync() is called automatically by the SDK. Normally you don't need to manually call it on your side. After removing it, does it help with the issue?

[lachire]

@gitajay Also, when you mentioned "All the components are async", do you mean these components are mapped using React.lazy() and wrapped in <Suspense>?

[gitajay]

My bad! Async to get the data in useEffect. Component as CSR. So component render immediately with null and later render with the data.

[lachire]

@gitajay The issue should be fixed in v28.1.0 and brXM v17.2+

[gitajay]

@lachire Great news!