Skip to content

fix(webapp):> Fix for mouse hover on a timeline not being updates after resize #2780

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mpcgrid wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(webapp):> Fix for mouse hover on a timeline not being updates after resize #2780

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b4d6d78
Fix for mouse hover on a timline not being updates after resize
mpcgrid Dec 11, 2025
a2277d5
Merge branch 'main' into fix/tri-6732-hover-vertical-timeline-does-no…
mpcgrid Dec 12, 2025
fd46381
optimized the animation frame loop
mpcgrid Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 76 additions & 15 deletions apps/webapp/app/components/primitives/Timeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {
Component,
ComponentPropsWithoutRef,
Fragment,
ReactNode,
createContext,
useCallback,
useContext,
useEffect,
useRef,
useState,
} from "react";
Expand All @@ -19,27 +19,88 @@ const MousePositionContext = createContext<MousePosition | undefined>(undefined)
export function MousePositionProvider({ children }: { children: ReactNode }) {
const ref = useRef<HTMLDivElement>(null);
const [position, setPosition] = useState<MousePosition | undefined>(undefined);
const lastClient = useRef<{ clientX: number; clientY: number } | null>(null);
const rafId = useRef<number | null>(null);

const computeFromClient = useCallback((clientX: number, clientY: number) => {
if (!ref.current) {
setPosition(undefined);
return;
}

const { top, left, width, height } = ref.current.getBoundingClientRect();
const x = (clientX - left) / width;
const y = (clientY - top) / height;

if (x < 0 || x > 1 || y < 0 || y > 1) {
setPosition(undefined);
return;
}

setPosition({ x, y });
}, []);

const handleMouseMove = useCallback(
(e: React.MouseEvent) => {
if (!ref.current) {
setPosition(undefined);
return;
}
lastClient.current = { clientX: e.clientX, clientY: e.clientY };
computeFromClient(e.clientX, e.clientY);
},
[computeFromClient]
);

// Recalculate the relative position when the container resizes or the window/ancestors scroll.
useEffect(() => {
if (!ref.current) return;

const { top, left, width, height } = ref.current.getBoundingClientRect();
const x = (e.clientX - left) / width;
const y = (e.clientY - top) / height;
const ro = new ResizeObserver(() => {
const lc = lastClient.current;
if (lc) computeFromClient(lc.clientX, lc.clientY);
});
ro.observe(ref.current);

if (x < 0 || x > 1 || y < 0 || y > 1) {
setPosition(undefined);
return;
const onRecalc = () => {
const lc = lastClient.current;
if (lc) computeFromClient(lc.clientX, lc.clientY);
};

window.addEventListener("resize", onRecalc);
// Use capture to catch scroll on any ancestor that impacts bounding rect
window.addEventListener("scroll", onRecalc, true);

return () => {
ro.disconnect();
window.removeEventListener("resize", onRecalc);
window.removeEventListener("scroll", onRecalc, true);
};
}, [computeFromClient]);

useEffect(() => {
if (position === undefined || !lastClient.current || !ref.current) return;

const isAnimating = () => {
if (!ref.current) return false;
const styles = window.getComputedStyle(ref.current);
return styles.transition !== "none" || styles.animation !== "none";
};
Comment on lines +80 to +84
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

isAnimating() check doesn't detect active animations correctly.

getComputedStyle().transition returns the defined CSS transition value (e.g., "width 0.3s ease"), not whether a transition is currently running. If the element or its ancestors have any CSS transitions defined, this will always return true, causing the RAF loop to run perpetually while hovering.

Use the Web Animations API to detect active animations:

    const isAnimating = () => {
      if (!ref.current) return false;
-     const styles = window.getComputedStyle(ref.current);
-     return styles.transition !== "none" || styles.animation !== "none";
+     return ref.current.getAnimations({ subtree: false }).length > 0;
    };

Alternatively, consider listening to transitionstart/transitionend events to set a flag, which avoids polling entirely.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const isAnimating = () => {
if (!ref.current) return false;
const styles = window.getComputedStyle(ref.current);
return styles.transition !== "none" || styles.animation !== "none";
};
const isAnimating = () => {
if (!ref.current) return false;
return ref.current.getAnimations({ subtree: false }).length > 0;
};
🤖 Prompt for AI Agents 
In apps/webapp/app/components/primitives/Timeline.tsx around lines 80-84,
replace the current isAnimating() logic (which checks computed styles) with a
real runtime check using the Web Animations API: call
ref.current.getAnimations({subtree: true}) and return true if any animation's
playState === 'running'; if getAnimations is not available (older browsers),
fall back to adding transitionstart/animationstart and
transitionend/animationend listeners on the element to set/clear an internal
isAnimatingFlag and have isAnimating() return that flag. This ensures the RAF
loop only runs while animations are actually active.


const tick = () => {
const lc = lastClient.current;
if (lc) {
computeFromClient(lc.clientX, lc.clientY);
if (isAnimating()) {
rafId.current = requestAnimationFrame(tick);
} else {
rafId.current = null;
}
}
};

setPosition({ x, y });
},
[ref.current]
);
rafId.current = requestAnimationFrame(tick);
return () => {
if (rafId.current !== null) cancelAnimationFrame(rafId.current);
rafId.current = null;
};
}, [position, computeFromClient]);

return (
<div
Expand Down