<ScrollRestoration /> does not restore the scroll positions before DOM paint #2601

Activity

1. xiaohai-huang commented on Oct 23, 2024

   

   xiaohai-huang

   on Oct 23, 2024

   Last edited by xiaohai-huang

   Contributor

   More actions

   I identified that the issue occurs because the onResolved event is triggered after the <HomeTab /> component has mounted. Since the <ScrollRestoration /> component performs scroll restoration when the onResolved event is emitted, it consistently restores the cached scroll position after <HomeTab /> becomes visible to the user.

   I resolved this issue using a workaround. Here’s how I addressed it:

   • Removes the isTransitioning check in isAnyPending in Transitioner.tsx

   With the above change, the onResolved event will be emitted before the useLayoutEffect in <Page /> component. And the flash is gone

   
2. xiaohai-huang commented on Oct 23, 2024

   

   xiaohai-huang

   on Oct 23, 2024

   Contributor

   More actions

   I understand that the above workaround is not a real solution to this issue. As isTransitioning is obviously useful, removing it might cause some serious bugs in the other places. Hope we can find a real solution to this problem.
3. xiaohai-huang commented on Oct 26, 2024

   

   xiaohai-huang

   on Oct 26, 2024

   Contributor

   More actions

   I propose a solution which is to make the router emit a new event called onBeforePageMount.

   The onBeforePageMount is designed to trigger actions that should occur just before a new page component mounts. This event allows developers to perform pre-render operations, such as scroll restoration, ensuring that these actions complete before the page content becomes visible to the user.

   👍React with 👍1Reacted by Manuel Schiller
4. schiller-manuel

   closed this as completedin #2645on Oct 27, 2024