Skip to content
This repository was archived by the owner on Sep 2, 2026. It is now read-only.

fix(bento): dispose homepage animation listeners and timers on unmount #3168

Open
WhoamiI00 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(bento): dispose homepage animation listeners and timers on unmount #3168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eaac4ef
fix(bento): dispose homepage animation listeners and timers on unmount
WhoamiI00 Aug 12, 2026
f2f5c3a
fix(bento): stop in-flight card animations on teardown
WhoamiI00 Aug 27, 2026
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
27 changes: 19 additions & 8 deletions src/routes/(marketing)/(components)/bento/(animations)/auth.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,15 @@
let currentAnimation: WriteAnimation | null = null;

$effect(() => {
inView(
// The write animation can settle after the component has been destroyed
// (e.g. the user clicks the card mid-animation), by which point
// `bind:this` has already reset `button` to null.
const pulseButton = () => {
if (!button) return;
animate(button, { scale: [1, 0.95, 1] }, { duration: 0.25 });
};

const stopInView = inView(
container,
() => {
if (!isMobile()) return;
Expand All @@ -28,9 +36,7 @@
1000,
password.length
);
currentAnimation.then(() => {
animate(button, { scale: [1, 0.95, 1] }, { duration: 0.25 });
});
currentAnimation.then(pulseButton);
return () => {
currentAnimation?.cancel();
currentAnimation = unwrite(
Expand All @@ -43,14 +49,12 @@
{ amount: 'all' }
);

hover(container, () => {
const stopHover = hover(container, () => {
if (isMobile()) return;

currentAnimation?.cancel();
currentAnimation = write('•••••••••••••', (v) => (password = v), 1000, password.length);
currentAnimation.then(() => {
animate(button, { scale: [1, 0.95, 1] }, { duration: 0.25 });
});
currentAnimation.then(pulseButton);
return () => {
currentAnimation?.cancel();
currentAnimation = unwrite(
Expand All @@ -60,6 +64,13 @@
);
};
});

return () => {
stopInView();
stopHover();
currentAnimation?.cancel();
currentAnimation = null;
};
});
</script>

Expand Down
24 changes: 18 additions & 6 deletions src/routes/(marketing)/(components)/bento/(animations)/databases.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,16 @@
let table: HTMLElement;
let shouldAnimate = $state<boolean>(false);

// Motion's cleanups detach the pointer listener and the observer, but an animation
// they already started keeps running against the card after it leaves the DOM. Only
// one can be in flight per element — a new one supersedes the last — so holding the
// latest controls is enough to stop the work on teardown.
let animation: ReturnType<typeof animate> | undefined;

$effect(() => {
hover(container, () => {
const stopHover = hover(container, () => {
if (isMobile()) return;
animate(
animation = animate(
table,
{
x: [12, -5],
Expand All @@ -82,7 +88,7 @@
shouldAnimate = true;

return () => {
animate(
animation = animate(
table,
{
x: [-5, 12],
Expand All @@ -99,12 +105,12 @@
};
});

inView(
const stopInView = inView(
container,
() => {
if (!isMobile()) return;

animate(
animation = animate(
table,
{
x: [12, -5],
Expand All @@ -119,7 +125,7 @@
shouldAnimate = true;

return () => {
animate(
animation = animate(
table,
{
x: [-5, 12],
Expand All @@ -137,6 +143,12 @@
},
{ amount: 'all' }
);

return () => {
stopHover();
stopInView();
Comment on lines +146 to +149

@greptile-apps greptile-apps Bot Aug 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 Active animations survive teardown

stopHover() and stopInView() only detach Motion's event and observer handlers; they do not stop animations already started by their callbacks. Navigating away during an animation therefore leaves work running against the detached card until completion; retain and stop the animation controls here and in the equivalent messaging, realtime, and storage cleanup paths.

Knowledge Base Used: Marketing pages

Prompt To Fix With AI 
This is a comment left during a code review.
Path: src/routes/(marketing)/(components)/bento/(animations)/databases.svelte
Line: 140-143

Comment:
**Active animations survive teardown**

`stopHover()` and `stopInView()` only detach Motion's event and observer handlers; they do not stop animations already started by their callbacks. Navigating away during an animation therefore leaves work running against the detached card until completion; retain and stop the animation controls here and in the equivalent messaging, realtime, and storage cleanup paths.

**Knowledge Base Used:** [Marketing pages](https://app.greptile.com/appwrite/-/custom-context/knowledge-base/appwrite/website/-/docs/marketing-pages.md)

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Fix in Claude Code Fix in Codex

@WhoamiI00 WhoamiI00 Aug 27, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Valid, and fixed in f2f5c3a — thanks.

You're right that the returned cleanups only detach the pointer listener and the observer. What made this worth fixing is that the PR was already inconsistent about it: auth, functions and sites do hold their controls and stop them on teardown, while databases, messaging, realtime and storage discarded the return value of animate() entirely. So the four you flagged were the gap, and the fix just brings them in line with the three that were already right.

Each of those four animates a single element and a new animation supersedes the previous one on it, so holding the latest controls is sufficient — no set or bookkeeping needed:

let animation: ReturnType<typeof animate> | undefined;
...
animation = animate(table, { ... }, { ... });
...
return () => {
    stopHover();
    stopInView();
    animation?.stop();
};

I used stop() rather than cancel() deliberately: stop() halts at the current state, while cancel() applies the initial state, which would visibly snap the card back if the effect re-ran rather than unmounted.

Typed via ReturnType<typeof animate> because AnimationPlaybackControlsWithThen is imported from motion-dom inside framer-motion's dom.d.ts rather than re-exported from motion, so naming it directly would reach past the public entry point.

svelte-check is clean — 0 errors, 0 warnings.

animation?.stop();
};
});
</script>

Expand Down
11 changes: 9 additions & 2 deletions src/routes/(marketing)/(components)/bento/(animations)/functions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
$effect(() => {
baseWidth = activeCommand.offsetWidth;

hover(container, () => {
const stopHover = hover(container, () => {
if (isMobile()) return;

widthAnim?.stop();
Expand All @@ -46,7 +46,7 @@
};
});

inView(
const stopInView = inView(
container,
() => {
if (!isMobile()) return;
Expand All @@ -70,6 +70,13 @@
},
{ amount: 'all' }
);

return () => {
stopHover();
stopInView();
widthAnim?.stop();
widthAnim = null;
};
});
</script>

Expand Down
24 changes: 18 additions & 6 deletions src/routes/(marketing)/(components)/bento/(animations)/messaging.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@
let device: HTMLElement;
let notification: HTMLElement;

// Motion's cleanups detach the pointer listener and the observer, but a sequence they
// already started keeps running against the card after it leaves the DOM. Only one
// can be in flight here — a new one supersedes the last — so holding the latest
// controls is enough to stop the work on teardown.
let animation: ReturnType<typeof animate> | undefined;

onMount(() => {
const from: AnimationSequence = [
[notification, { opacity: 0, y: -30, filter: 'blur(4px)' }, { duration: 0.2 }],
Expand All @@ -26,27 +32,33 @@
[notification, { opacity: 1, y: 0, filter: 'blur(0px)' }, { duration: 0.2, at: 0.15 }]
];

inView(
const stopInView = inView(
container,
() => {
if (!isMobile()) return;
animate(to);
animation = animate(to);

return () => {
animate(from);
animation = animate(from);
};
},
{ amount: 'all' }
);

hover(container, () => {
const stopHover = hover(container, () => {
if (isMobile()) return;
animate(to);
animation = animate(to);

return () => {
animate(from);
animation = animate(from);
};
});

return () => {
stopInView();
stopHover();
animation?.stop();
};
});
</script>

Expand Down
24 changes: 18 additions & 6 deletions src/routes/(marketing)/(components)/bento/(animations)/realtime.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@
let topRightCursor: HTMLElement;
let topRightPiece: HTMLElement;

// Motion's cleanups detach the pointer listener and the observer, but a sequence they
// already started keeps running against the card after it leaves the DOM. Only one
// can be in flight here — a new one supersedes the last — so holding the latest
// controls is enough to stop the work on teardown.
let animation: ReturnType<typeof animate> | undefined;

onMount(() => {
const from: AnimationSequence = [
[
Expand All @@ -34,27 +40,33 @@
[topRightCursor, { scale: 1 }, { duration: 0.25, at: 0.35 }]
];

inView(
const stopInView = inView(
container,
() => {
if (!isMobile()) return;
animate(to);
animation = animate(to);

return () => {
animate(from);
animation = animate(from);
};
},
{ amount: 'all' }
);

hover(container, () => {
const stopHover = hover(container, () => {
if (isMobile()) return;
animate(to);
animation = animate(to);

return () => {
animate(from);
animation = animate(from);
};
});

return () => {
stopInView();
stopHover();
animation?.stop();
};
});
</script>

Expand Down
16 changes: 14 additions & 2 deletions src/routes/(marketing)/(components)/bento/(animations)/sites.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,10 @@
];

let shouldAnimate = $state<boolean>(false);
let secondsAnimation: ReturnType<typeof animate> | null = null;

$effect(() => {
hover(container, () => {
const stopHover = hover(container, () => {
if (isMobile()) return;

shouldAnimate = true;
Expand All @@ -57,6 +58,7 @@
onUpdate: (latest) => (seconds = +latest.toFixed()),
duration: 44
});
secondsAnimation = animation;

currentAnimation?.cancel();
currentAnimation = write(
Expand All @@ -82,7 +84,7 @@
};
});

inView(
const stopInView = inView(
container,
() => {
if (!isMobile()) return;
Expand All @@ -92,6 +94,7 @@
onUpdate: (latest) => (seconds = +latest.toFixed()),
duration: 44
});
secondsAnimation = animation;

currentAnimation?.cancel();
currentAnimation = write(
Expand All @@ -118,6 +121,15 @@
},
{ amount: 'all' }
);

return () => {
stopHover();
stopInView();
secondsAnimation?.stop();
secondsAnimation = null;
currentAnimation?.cancel();
currentAnimation = null;
};
});
</script>

Expand Down
28 changes: 22 additions & 6 deletions src/routes/(marketing)/(components)/bento/(animations)/storage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,24 @@
let container: HTMLElement;
let image: HTMLElement;

// Motion's cleanups detach the pointer listener and the observer, but an animation
// they already started keeps running against the card after it leaves the DOM. Only
// one can be in flight per element — a new one supersedes the last — so holding the
// latest controls is enough to stop the work on teardown.
let animation: ReturnType<typeof animate> | undefined;

$effect(() => {
hover(container, () => {
const stopHover = hover(container, () => {
if (isMobile()) return;

animate(image, { borderRadius: '24px', filter: 'grayscale(25%)' }, { duration: 0.2 });
animation = animate(
image,
{ borderRadius: '24px', filter: 'grayscale(25%)' },
{ duration: 0.2 }
);

return () => {
animate(
animation = animate(
image,
{
borderRadius: '4px',
Expand All @@ -27,12 +37,12 @@
};
});

inView(
const stopInView = inView(
container,
() => {
if (!isMobile()) return;

animate(
animation = animate(
image,
{
borderRadius: '24px',
Expand All @@ -42,7 +52,7 @@
);

return () => {
animate(
animation = animate(
image,
{ borderRadius: '4px', filter: 'grayscale(100%)' },
{ duration: 0.2 }
Expand All @@ -53,6 +63,12 @@
amount: 'all'
}
);

return () => {
stopHover();
stopInView();
animation?.stop();
};
});
</script>

Expand Down