Conversation
WalkthroughThis pull request updates two animation components within a marketing bento section. The auth component receives minor refinements to its responsive grid classes and text content, removing explicit phrasing from a feature list. The databases component undergoes substantial refactoring, transitioning from motion-based animations to an interactive tab-based interface that cycles through three database types (Tables, Documents, Vectors). The refactor introduces new type definitions, state management for tracking the active tab, interval-based cycling helpers, and a redesigned UI structure with tabbed navigation and per-type demo content, replacing the previous data structures and animation approach. Estimated code review effort🎯 4 (Complex) | ⏱️ ~55 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip You can enable review details to help with troubleshooting, context usage and more.Enable the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/routes/`(marketing)/(components)/bento/(animations)/databases.svelte:
- Line 64: The const tableColumns is declared but unused; either remove the
declaration or use it to render the table header. To fix, either delete the
tableColumns constant or replace the hard-coded <th> elements in the component's
header rendering with a map over tableColumns (e.g., using each tableColumns as
column to output <th>{column}</th>) so the symbol tableColumns is consumed and
the eslint unused-vars error is resolved.
- Around line 70-83: The effect currently starts interval and motion observers
but doesn't return their disposer functions, so when the component unmounts
those will leak; update the reactive effect that calls hover() and inView() to
capture their returned teardown functions (e.g., const stopHover = hover(...);
const stopInView = inView(...)) and return a single cleanup function that clears
cycleInterval (using clearInterval and nulling cycleInterval) and invokes
stopHover and stopInView; also ensure startCycle() / stopCycle() logic still
sets activeType and that stopCycle() does not leave the interval running.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c79fa9b9-be06-46c0-a76f-8afcf4e6358f
📒 Files selected for processing (2)
src/routes/(marketing)/(components)/bento/(animations)/auth.sveltesrc/routes/(marketing)/(components)/bento/(animations)/databases.svelte
| ]; | ||
|
|
||
| const keys = Object.keys(products[0]); | ||
| const tableColumns = ['ID', 'Name', 'Genre', 'Year', 'Rating']; |
There was a problem hiding this comment.
Remove or use tableColumns before merge.
This constant is dead right now and trips @typescript-eslint/no-unused-vars. If it was meant to back the header row, wire it into the <th> rendering; otherwise delete it.
🧰 Tools
🪛 ESLint
[error] 64-64: 'tableColumns' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/routes/`(marketing)/(components)/bento/(animations)/databases.svelte at
line 64, The const tableColumns is declared but unused; either remove the
declaration or use it to render the table header. To fix, either delete the
tableColumns constant or replace the hard-coded <th> elements in the component's
header rendering with a map over tableColumns (e.g., using each tableColumns as
column to output <th>{column}</th>) so the symbol tableColumns is consumed and
the eslint unused-vars error is resolved.
| function startCycle() { | ||
| cycleInterval = setInterval(() => { | ||
| const idx = types.indexOf(activeType); | ||
| activeType = types[(idx + 1) % types.length]; | ||
| }, 1800); | ||
| } | ||
|
|
||
| function stopCycle() { | ||
| if (cycleInterval) { | ||
| clearInterval(cycleInterval); | ||
| cycleInterval = null; | ||
| } | ||
| activeType = 'Tables'; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n src/routes/\(marketing\)/\(components\)/bento/\(animations\)/databases.svelteRepository: appwrite/website
Length of output: 21326
🏁 Script executed:
rg "motion" src/routes/\(marketing\)/\(components\)/bento/ -A 5 -B 2 --type svelte | head -50Repository: appwrite/website
Length of output: 90
Return disposer functions from hover() and inView() in the effect cleanup.
The interval and motion listeners will outlive the component if it's destroyed while active. The $effect must capture and return the disposer functions to ensure cleanup when the component unmounts.
Minimal fix
function startCycle() {
+ if (cycleInterval) return;
cycleInterval = setInterval(() => {
const idx = types.indexOf(activeType);
activeType = types[(idx + 1) % types.length];
}, 1800);
}
$effect(() => {
- hover(container, () => {
+ const stopHover = hover(container, () => {
if (isMobile()) return;
startCycle();
return () => stopCycle();
});
- inView(
+ const stopInView = inView(
container,
() => {
if (!isMobile()) return;
startCycle();
return () => stopCycle();
},
{ amount: 'all' }
);
+
+ return () => {
+ stopHover();
+ stopInView();
+ stopCycle();
+ };
});🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/routes/`(marketing)/(components)/bento/(animations)/databases.svelte
around lines 70 - 83, The effect currently starts interval and motion observers
but doesn't return their disposer functions, so when the component unmounts
those will leak; update the reactive effect that calls hover() and inView() to
capture their returned teardown functions (e.g., const stopHover = hover(...);
const stopInView = inView(...)) and return a single cleanup function that clears
cycleInterval (using clearInterval and nulling cycleInterval) and invokes
stopHover and stopInView; also ensure startCycle() / stopCycle() logic still
sets activeType and that stopCycle() does not leave the interval running.
1 participant
What does this PR do?
Screen.Recording.2026-03-18.at.13.49.38.mov
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
(Write your answer here.)
Summary by CodeRabbit
New Features
Style