Skip to content

[MNY-334] SDK: Fix Spinner animation missing sometimes in Next.js #8553

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

Jump to bottom
Merged
graphite-app merged 1 commit into from
Dec 12, 2025
Merged

[MNY-334] SDK: Fix Spinner animation missing sometimes in Next.js #8553

graphite-app merged 1 commit into from
Dec 12, 2025
+14 −10

Conversation

@MananTank
Copy link
Member

@MananTank MananTank commented Dec 12, 2025 •
edited by pr-codex bot
Loading

PR-Codex overview

This PR focuses on fixing the Spinner animation issue in a Next.js application by modifying the Spinner component's implementation.

Detailed summary

  • Updated the import in Spinner.tsx to remove StyledCircle.
  • Replaced the Circle component with a circle SVG element.
  • Added inline styles for the circle to implement the animation.
  • Defined the dashAnimation keyframes directly in the component.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

@linear
Copy link

linear bot commented Dec 12, 2025

MNY-334 Investigate whey Spinner is not animated sometimes when used in Next.js

@changeset-bot
Copy link

changeset-bot bot commented Dec 12, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 38f4a89

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
thirdweb Patch
@thirdweb-dev/nebula Patch
@thirdweb-dev/wagmi-adapter Patch
wagmi-inapp Patch

Not sure what this means? Click here to learn what changesets are.

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

@vercel
Copy link

vercel bot commented Dec 12, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
docs-v2 Ready Ready Preview Comment Dec 12, 2025 6:46pm
nebula Ready Ready Preview Comment Dec 12, 2025 6:46pm
thirdweb_playground Ready Ready Preview Comment Dec 12, 2025 6:46pm
thirdweb-www Ready Ready Preview Comment Dec 12, 2025 6:46pm
wallet-ui Ready Ready Preview Comment Dec 12, 2025 6:46pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 12, 2025 •
edited
Loading

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch mny-334

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

@github-actions github-actions bot added packages SDK Involves changes to the thirdweb SDK labels Dec 12, 2025
@MananTank MananTank marked this pull request as ready for review December 12, 2025 18:10
@MananTank MananTank requested review from a team as code owners December 12, 2025 18:10
@MananTank MananTank mentioned this pull request Dec 12, 2025
Merged
@MananTank Graphite App
Copy link
Member Author

MananTank commented Dec 12, 2025 •
edited
Loading

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • merge-queue - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

@MananTank MananTank mentioned this pull request Dec 12, 2025
Merged
@github-actions
Copy link
Contributor

github-actions bot commented Dec 12, 2025 •
edited
Loading

size-limit report 📦

Path Size
@thirdweb-dev/nexus (esm) 105.66 KB (0%)
@thirdweb-dev/nexus (cjs) 319.47 KB (0%)

@codecov
Copy link

codecov bot commented Dec 12, 2025 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.63%. Comparing base (31e24f1) to head (38f4a89).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #8553      +/-   ##
==========================================
- Coverage   54.64%   54.63%   -0.01%     
==========================================
  Files         921      921              
  Lines       61193    61193              
  Branches     4154     4150       -4     
==========================================
- Hits        33439    33434       -5     
- Misses      27652    27657       +5     
  Partials      102      102
Flag Coverage Δ
packages 54.63% <100.00%> (-0.01%) ⬇️
Files with missing lines Coverage Δ
...s/thirdweb/src/react/web/ui/components/Spinner.tsx 94.73% <100.00%> (+0.14%) ⬆️
...hirdweb/src/react/web/ui/design-system/elements.ts 100.00% <ø> (ø)

... and 2 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@graphite-app
Copy link
Contributor

graphite-app bot commented Dec 12, 2025 •
edited
Loading

Merge activity

@MananTank
[MNY-334] SDK: Fix Spinner animation missing sometimes in Next.js (#8553
38f4a89 
)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR addresses an issue with the `Spinner` component's animation in a Next.js environment, ensuring that the animation works consistently.

### Detailed summary
- Updated the `Spinner` component to use a `<circle>` element instead of a `Circle` styled component.
- Removed the `StyledCircle` import from `elements.js`.
- Added animation styles directly to the `<circle>` element.
- Defined the `tw-spinner-circle-dash` keyframe animation within the component.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
Base automatically changed from mny-331 to main December 12, 2025 18:46
@graphite-app graphite-app bot merged commit 38f4a89 into main Dec 12, 2025
20 checks passed
@graphite-app graphite-app bot deleted the mny-334 branch December 12, 2025 18:46
@joaquim-verges joaquim-verges mentioned this pull request Dec 12, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@MananTank MananTank

Labels

packages SDK Involves changes to the thirdweb SDK

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@MananTank