Preserve loader behavior while reducing hidden work (#1996)

* fix(app): preserve loader behavior in retained panels

Keep the running footer mounted across panel switches. Inactive loaders stop their animation work, then realign to the original wall-clock phase before they become visible.

* perf(app): remove inactive loader wrapper worklet

* perf(app): pause hidden turn elapsed timers

* perf(app): reduce loader animation work

Keep one wall-clock-aligned clock for visible loaders and detach retained
hidden loaders without unmounting them. Preserve the 950 ms sequence and
reduced-motion behavior.
This commit is contained in:
Mohamed Boudra
2026-07-11 13:25:24 +02:00
committed by GitHub
parent 5d18edd31e
commit adc9b3b43c
10 changed files with 182 additions and 123 deletions
@@ -0,0 +1,22 @@
const SYNCED_LOADER_DURATION_MS = 950;
export const SYNCED_LOADER_DOT_COUNT = 6;
const SYNCED_LOADER_OPACITY_STATES = [
[1, 0, 0.78, 0, 0.56, 0.34],
[0.78, 1, 0.56, 0, 0.34, 0],
[0.56, 0.78, 0.34, 1, 0, 0],
[0.34, 0.56, 0, 0.78, 0, 1],
[0, 0.34, 0, 0.56, 1, 0.78],
[0, 0, 1, 0.34, 0.78, 0.56],
] as const;
export function getSyncedLoaderStep(nowMs: number): number {
"worklet";
const elapsedMs = nowMs % SYNCED_LOADER_DURATION_MS;
return Math.floor((elapsedMs * SYNCED_LOADER_DOT_COUNT) / SYNCED_LOADER_DURATION_MS);
}
export function getSyncedLoaderDotOpacity(step: number, dot: number): number {
"worklet";
return SYNCED_LOADER_OPACITY_STATES[step]?.[dot] ?? 0;
}