From 38f4a890764b3aa6406f54f0a8238b5dbb280b2e Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 12 Dec 2025 18:35:49 +0000
Subject: [PATCH] [MNY-334] SDK: Fix Spinner animation missing sometimes in
 Next.js (#8553)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 -->
---
 .changeset/violet-needles-fly.md               |  5 +++++
 .../src/react/web/ui/components/Spinner.tsx    | 18 +++++++++---------
 .../src/react/web/ui/design-system/elements.ts |  1 -
 3 files changed, 14 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/violet-needles-fly.md

diff --git a/.changeset/violet-needles-fly.md b/.changeset/violet-needles-fly.md
new file mode 100644
index 00000000000..dde5d8e50e6
--- /dev/null
+++ b/.changeset/violet-needles-fly.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix Spinner animation not working sometimes in Next.js
diff --git a/packages/thirdweb/src/react/web/ui/components/Spinner.tsx b/packages/thirdweb/src/react/web/ui/components/Spinner.tsx
index c4d541cfbc6..e89798b9f97 100644
--- a/packages/thirdweb/src/react/web/ui/components/Spinner.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/Spinner.tsx
@@ -3,7 +3,7 @@ import { keyframes } from "@emotion/react";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { iconSize } from "../../../core/design-system/index.js";
-import { StyledCircle, StyledSvg } from "../design-system/elements.js";
+import { StyledSvg } from "../design-system/elements.js";
 
 /**
  * @internal
@@ -24,20 +24,25 @@ export const Spinner: React.FC<{
       viewBox="0 0 50 50"
       className="tw-spinner"
     >
-      <Circle
+      <circle
         cx="25"
         cy="25"
         fill="none"
         r="20"
+        style={{
+          strokeLinecap: "round",
+          animation: `tw-spinner-circle-dash 1.5s ease-in-out infinite`,
+        }}
         stroke={props.color ? theme.colors[props.color] : "currentColor"}
         strokeWidth={Number(iconSize[props.size]) > 64 ? "2" : "4"}
       />
+      <style>{dashAnimation}</style>
     </Svg>
   );
 };
-
 // animations
-const dashAnimation = keyframes`
+const dashAnimation = `
+@keyframes tw-spinner-circle-dash {
   0% {
     stroke-dasharray: 1, 150;
     stroke-dashoffset: 0;
@@ -63,8 +68,3 @@ const Svg = /* @__PURE__ */ StyledSvg({
   height: "1em",
   width: "1em",
 });
-
-const Circle = /* @__PURE__ */ StyledCircle({
-  animation: `${dashAnimation} 1.5s ease-in-out infinite`,
-  strokeLinecap: "round",
-});
diff --git a/packages/thirdweb/src/react/web/ui/design-system/elements.ts b/packages/thirdweb/src/react/web/ui/design-system/elements.ts
index 655aadde7ac..2d42438c10b 100644
--- a/packages/thirdweb/src/react/web/ui/design-system/elements.ts
+++ b/packages/thirdweb/src/react/web/ui/design-system/elements.ts
@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 
 export const StyledDiv = /* @__PURE__ */ styled.div;
 export const StyledSvg = /* @__PURE__ */ styled.svg;
-export const StyledCircle = /* @__PURE__ */ styled.circle;
 export const StyledSpan = /* @__PURE__ */ styled.span;
 export const StyledAnchor = /* @__PURE__ */ styled.a;
 export const StyledButton = /* @__PURE__ */ styled.button;