removed button animations triggered on each wave switch

[ragnep]

Summary by CodeRabbit

• New Features

  • Intelligent height animation: height transitions are suppressed on desktop when switching waves or while data is fetching.
  • Responsive action animations: action controls adapt expand/fade behavior based on container width and user interactions.

• UI Improvements

  • Contributor-level badge repositioned and resized across leaderboards and winner headers for a cleaner, more consistent layout.

[coderabbitai]

Warning

Rate limit exceeded

@ragnep has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 13 minutes and 18 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

Detects wave.id changes and container width/user toggles to conditionally disable height animation and toggle action animations; wires a new disableAnimation prop through CommonAnimationHeight and animateOptions through CreateDropActions to alter animation behavior without changing public APIs elsewhere.

Changes

Cohort / File(s)	Summary
Wave detection & wrapper components/drops/create/utils/CreateDropWrapper.tsx	Adds prevWaveIdRef and isWaveSwitch to detect waveProps.id changes; exposes isWaveFetching and computes disableHeightAnimation when wave switches or fetching.
Common animation primitive components/utils/animation/CommonAnimationHeight.tsx	Adds disableAnimation?: boolean prop and uses it to set transition duration to 0s when true (0.3s otherwise).
CreateDrop content & sizing components/waves/CreateDropContent.tsx	Adds container width measurement (ResizeObserver, useLayoutEffect), hasUserToggledOptionsRef, prevWaveIdRef; updates showOptions and computes animateOptions based on width, user toggles, and wave-switch; resets options on wave change.
CreateDrop actions & motion config components/waves/CreateDropActions.tsx	Adds animateOptions to the public props and conditionally selects expandMotionProps / fadeMotionProps so motion behavior can be enabled/disabled.
Author/CIC badge reorder components/memes/drops/MemesLeaderboardDropArtistInfo.tsx, components/brain/my-stream/votes/MyStreamWaveMyVote.tsx, components/waves/winners/drops/MemesWaveWinnerDrop.tsx	Moves UserCICAndLevel/CIC badge to render after the author handle/link in the header; in one file size changes (LARGE → SMALL). DOM order changed; data sources unchanged.
Manifest package.json	Package manifest touched.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant Wrapper as CreateDropWrapper
participant Content as CreateDropContent
participant Actions as CreateDropActions
participant Anim as CommonAnimationHeight
Wrapper->>Content: provide waveProps + isFetching
Content-->>Content: measure width, track user toggle, detect wave change (prevWaveIdRef)
Content->>Actions: pass animateOptions (computed)
Wrapper->>Anim: pass disableAnimation (disableHeightAnimation)
Actions->>Anim: render children (motion props influenced by animateOptions)
Note over Content,Actions,Anim: Animation behavior depends on wave switch, fetch, width, and user toggles

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Leaderboard card list view touch-ups #1639 — overlapping changes to author/CIC placement and related components.
• input are auto close fix #1854 — related adjustments to CreateDropContent/CreateDropActions option visibility and animation flow.
• Submission view redesign #1655 — related wiring of disable-animation/animateOptions between CommonAnimationHeight and callers.

Suggested reviewers

• prxt6529

Poem

🐇 I hopped through refs and measured space,

When waves did change I slowed my pace,
I told the height to hush its song,
While options danced when usersong,
A tiny rabbit kept the UI strong 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'removed button animations triggered on each wave switch' accurately describes the primary change: the PR introduces conditional animation logic that prevents animations from being triggered every time the wave switches, instead disabling animations at those specific moments.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch input-actions-animation-fix

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@components/brain/my-stream/votes/MyStreamWaveMyVote.tsx`:
- Around line 150-153: The current code in MyStreamWaveMyVote.tsx always renders
UserCICAndLevel with level={drop.author.level || 0}, causing a "0" badge for
users without a level; change this to conditionally render UserCICAndLevel only
when drop.author.level is truthy (match the pattern used in
MemesWaveWinnerDrop.tsx) and pass the actual level (drop.author.level) and
size={UserCICAndLevelSize.SMALL}; locate the UserCICAndLevel usage in
MyStreamWaveMyVote and wrap it in a conditional check (e.g., if
(drop.author.level) render UserCICAndLevel) so no badge is shown when level is
missing.

🧹 Nitpick comments (1)

components/waves/CreateDropContent.tsx (1)

36-39: Guard ResizeObserver for non-browser/test environments.

ResizeObserver can be undefined in some test runners or older browsers, which would throw during effect execution. Consider a defensive guard or polyfill.

Proposed guard

   useLayoutEffect(() => {
     const container = actionsContainerRef.current;
     if (!container) return;

     const measureWidth = () => {
       const width = container.getBoundingClientRect().width;
       const isWide = width >= CONTAINER_WIDTH_THRESHOLD;
       setIsWideContainer((prev) => (prev === isWide ? prev : isWide));
     };

     measureWidth();

+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
     const observer = new ResizeObserver((entries) => {
       const entry = entries[0];
       if (entry) {
         const width = entry.contentRect.width;
         const isWide = width >= CONTAINER_WIDTH_THRESHOLD;
         setIsWideContainer((prev) => (prev === isWide ? prev : isWide));
       }
     });

Also applies to: 513-536

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud