From 00e3c39cf9a15265d229676defc8314c1f27204f Mon Sep 17 00:00:00 2001 From: Daniel da Silva Date: Wed, 2 Aug 2023 17:04:20 +0100 Subject: [PATCH] Fix timeline rescale glitch --- app/scripts/components/exploration/hooks.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app/scripts/components/exploration/hooks.ts b/app/scripts/components/exploration/hooks.ts index d38d488dd..4098e1787 100644 --- a/app/scripts/components/exploration/hooks.ts +++ b/app/scripts/components/exploration/hooks.ts @@ -66,7 +66,14 @@ export function useScales() { const scaled = useMemo(() => { if (!main) return undefined; return rescaleX(main, zoomTransform.x, zoomTransform.k); - }, [main, zoomTransform.x, zoomTransform.k]); + // We want to scale this scale only when the zoom transform changes. + // The zoom transform is what dictates the current timeline view so it is + // important that it drives the scale. Because the main changes before the + // zoom transform we can't include it in the deps, otherwise we'd have a + // weird midway render in the timeline when this scale had reacted to the + // main change but not to the zoom transform change. + }, [zoomTransform.x, zoomTransform.k]); - return { main, scaled }; + // In the first run the scaled and main scales are the same. + return { main, scaled: scaled ?? main }; }