Skip to content

Fix TabBar accent animation initialization in useTabs hook#14072

Merged
dylanjeffers merged 2 commits intomainfrom
claude/fix-unmounted-state-update-Uquwu
Apr 8, 2026
Merged

Fix TabBar accent animation initialization in useTabs hook#14072
dylanjeffers merged 2 commits intomainfrom
claude/fix-unmounted-state-update-Uquwu

Conversation

@dylanjeffers
Copy link
Copy Markdown
Contributor

Summary

Updated the TabBar accent animation initialization to use the from property instead of to with immediate: true in the useSpring hook configuration.

Key Changes

  • Changed useSpring initial animation configuration from to: { top: 0, left: 0, width: 0 } with immediate: true to from: { top: 0, left: 0, width: 0 }
  • This ensures the accent bar starts from the correct initial state (0, 0, 0) before animating to the active tab position

Implementation Details

The from property in react-spring defines the starting point of an animation, which is more semantically correct than using to with immediate: true. This change improves the animation lifecycle by properly establishing the initial state before any animated transitions occur, resulting in more predictable and correct accent bar positioning behavior.

https://claude.ai/code/session_017YQMNfGhGb5tU4e5v9iW9o

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 7, 2026

⚠️ No Changeset found

Latest commit: 13fb167

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Use `from` instead of `to` in useSpring initializer to avoid
triggering an animation update before TabAccent mounts. The
initial positioning is already handled by resizeTabs() in
useEffect after mount.

https://claude.ai/code/session_017YQMNfGhGb5tU4e5v9iW9o
@dylanjeffers dylanjeffers force-pushed the claude/fix-unmounted-state-update-Uquwu branch from 449ae9d to 7f0273e Compare April 7, 2026 23:04
The useSpring initializer change from `to` to `from` causes TypeScript
to infer a narrower type for the setter that excludes `to`. This is
consistent with the existing @ts-ignore on the useSpring call itself.

https://claude.ai/code/session_017YQMNfGhGb5tU4e5v9iW9o
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 7, 2026

🌐 Web preview ready

Preview URL: https://audius-web-preview-pr-14072.audius.workers.dev

Unique preview for this PR (deployed from this branch).
Workflow run

@dylanjeffers dylanjeffers merged commit eac7b77 into main Apr 8, 2026
14 checks passed
@dylanjeffers dylanjeffers deleted the claude/fix-unmounted-state-update-Uquwu branch April 8, 2026 00:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants