mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 15:51:00 +00:00
fix(mobile): page transitions hung four seconds on every navigation to a lazy page
The transition waited for the new page to replace its route fallback and polled for that with requestAnimationFrame. While a view transition waits for its update the browser renders no frames, so the callback never fired and every navigation to a page whose chunk was still loading sat frozen until the browser gave up after four seconds. The wait now polls with a timer: from Vacay to the journal takes 0.45 s instead of 4.1 s with an empty cache.
This commit is contained in:
@@ -44,13 +44,19 @@ function canAnimate(): boolean {
|
||||
);
|
||||
}
|
||||
|
||||
/** Resolves once no route fallback is on screen, or after SETTLE_MS. */
|
||||
/**
|
||||
* Resolves once no route fallback is on screen, or after SETTLE_MS. Polled with
|
||||
* a timer, never requestAnimationFrame: while a view transition waits for its
|
||||
* update, the browser renders no frames, so a frame callback never came and the
|
||||
* transition hung until the browser gave up after four seconds, on every
|
||||
* navigation.
|
||||
*/
|
||||
function settled(): Promise<void> {
|
||||
const began = performance.now();
|
||||
return new Promise((resolve) => {
|
||||
const check = () => {
|
||||
if (!document.querySelector('[data-route-fallback]') || performance.now() - began > SETTLE_MS) resolve();
|
||||
else requestAnimationFrame(check);
|
||||
else window.setTimeout(check, 16);
|
||||
};
|
||||
check();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user