diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
index 43c753023..12e4d96b0 100644
--- a/packages/common/CHANGELOG.md
+++ b/packages/common/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
+## 8.34.2 ((1/2/2026, 09:41 AM PST))
+
+This is an artificial version bump with no new change.
+
## 8.34.1 ((12/23/2025, 11:31 AM PST))
This is an artificial version bump with no new change.
diff --git a/packages/common/package.json b/packages/common/package.json
index 77022bf1d..edc6cc73e 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-common",
- "version": "8.34.1",
+ "version": "8.34.2",
"description": "Coinbase Design System - Common",
"repository": {
"type": "git",
diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md
index c297724cc..7f0f7515d 100644
--- a/packages/mcp-server/CHANGELOG.md
+++ b/packages/mcp-server/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
+## 8.34.2 ((1/2/2026, 09:41 AM PST))
+
+This is an artificial version bump with no new change.
+
## 8.34.1 ((12/23/2025, 11:31 AM PST))
This is an artificial version bump with no new change.
diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
index 0dea85d10..4c79c0d6c 100644
--- a/packages/mcp-server/package.json
+++ b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-mcp-server",
- "version": "8.34.1",
+ "version": "8.34.2",
"description": "Coinbase Design System - MCP Server",
"repository": {
"type": "git",
diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md
index 3f3160839..30b0fb34d 100644
--- a/packages/mobile/CHANGELOG.md
+++ b/packages/mobile/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
+## 8.34.2 ((1/2/2026, 09:41 AM PST))
+
+This is an artificial version bump with no new change.
+
## 8.34.1 ((12/23/2025, 11:31 AM PST))
This is an artificial version bump with no new change.
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
index 9b4fe60f0..57093434f 100644
--- a/packages/mobile/package.json
+++ b/packages/mobile/package.json
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-mobile",
- "version": "8.34.1",
+ "version": "8.34.2",
"description": "Coinbase Design System - Mobile",
"repository": {
"type": "git",
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
index aca7f809b..bc941f28b 100644
--- a/packages/web/CHANGELOG.md
+++ b/packages/web/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
+## 8.34.2 (1/2/2026 PST)
+
+#### 🐞 Fixes
+
+- Handle disableAnimateOnMount prop for web ProgressCircle. [[#280](https://github.com/coinbase/cds/pull/280)]
+
## 8.34.1 (12/23/2025 PST)
#### 🐞 Fixes
diff --git a/packages/web/package.json b/packages/web/package.json
index fc793e5a9..0a91a2ca1 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -1,6 +1,6 @@
{
"name": "@coinbase/cds-web",
- "version": "8.34.1",
+ "version": "8.34.2",
"description": "Coinbase Design System - Web",
"repository": {
"type": "git",
diff --git a/packages/web/src/visualizations/DefaultProgressCircleContent.tsx b/packages/web/src/visualizations/DefaultProgressCircleContent.tsx
index 1511be504..1127c23c0 100644
--- a/packages/web/src/visualizations/DefaultProgressCircleContent.tsx
+++ b/packages/web/src/visualizations/DefaultProgressCircleContent.tsx
@@ -4,9 +4,19 @@ import type { ProgressCircleContentProps } from './ProgressCircle';
import { ProgressTextLabel } from './ProgressTextLabel';
export const DefaultProgressCircleContent = memo(
- ({ progress, disabled, color = 'fgMuted' }: ProgressCircleContentProps) => {
+ ({
+ progress,
+ disableAnimateOnMount,
+ disabled,
+ color = 'fgMuted',
+ }: ProgressCircleContentProps) => {
return (
-
+
);
},
);
diff --git a/packages/web/src/visualizations/ProgressCircle.tsx b/packages/web/src/visualizations/ProgressCircle.tsx
index 5df23462f..f8aeae448 100644
--- a/packages/web/src/visualizations/ProgressCircle.tsx
+++ b/packages/web/src/visualizations/ProgressCircle.tsx
@@ -99,7 +99,10 @@ export type ProgressCircleProps = ProgressCircleBaseProps & {
};
};
-export type ProgressCircleContentProps = Pick & {
+export type ProgressCircleContentProps = Pick<
+ ProgressCircleBaseProps,
+ 'progress' | 'disableAnimateOnMount' | 'disabled'
+> & {
/**
* Custom text color.
* @default fgMuted
@@ -109,7 +112,7 @@ export type ProgressCircleContentProps = Pick &
Required> & {
visuallyDisabled?: boolean;
@@ -128,6 +131,7 @@ const ProgressCircleInner = memo(
className,
onAnimationEnd,
onAnimationStart,
+ disableAnimateOnMount,
}: ProgressInnerCircleProps) => {
const strokeWidth = useProgressSize(weight);
const circleRef = useRef(null);
@@ -145,7 +149,9 @@ const ProgressCircleInner = memo(
strokeDashoffset: progressOffset,
},
transition: animateProgressBaseSpec,
- initial: { strokeDashoffset: circumference },
+ initial: {
+ strokeDashoffset: disableAnimateOnMount ? progressOffset : circumference,
+ },
});
return (
@@ -176,6 +182,7 @@ export const ProgressCircle = memo(
progress,
color = 'bgPrimary',
disabled = false,
+ disableAnimateOnMount = false,
testID,
hideContent,
hideText,
@@ -240,6 +247,7 @@ export const ProgressCircle = memo(
{contentNode ?? (
-
+
)}
diff --git a/packages/web/src/visualizations/ProgressTextLabel.tsx b/packages/web/src/visualizations/ProgressTextLabel.tsx
index a4b936459..8eb595dfc 100644
--- a/packages/web/src/visualizations/ProgressTextLabel.tsx
+++ b/packages/web/src/visualizations/ProgressTextLabel.tsx
@@ -10,7 +10,10 @@ import { Text } from '../typography/Text';
import { Counter } from './Counter';
import type { ProgressBaseProps } from './ProgressBar';
-export type ProgressTextLabelProps = Pick & {
+export type ProgressTextLabelProps = Pick<
+ ProgressBaseProps,
+ 'disableAnimateOnMount' | 'disabled'
+> & {
value: number;
renderLabel?: (num: number, disabled?: boolean) => React.ReactNode;
color?: ThemeVars.Color;
@@ -25,8 +28,18 @@ export type ProgressTextLabelProps = Pick & {
};
export const ProgressTextLabel = memo(
- ({ value, renderLabel, disabled, color, style, className }: ProgressTextLabelProps) => {
- const { getPreviousValue, addPreviousValue } = usePreviousValues([0]);
+ ({
+ value,
+ renderLabel,
+ disableAnimateOnMount,
+ disabled,
+ color,
+ style,
+ className,
+ }: ProgressTextLabelProps) => {
+ const { getPreviousValue, addPreviousValue } = usePreviousValues([
+ disableAnimateOnMount ? value : 0,
+ ]);
addPreviousValue(value);
diff --git a/packages/web/src/visualizations/__stories__/ProgressCircle.stories.tsx b/packages/web/src/visualizations/__stories__/ProgressCircle.stories.tsx
index 6ae8609a2..a94ab66a7 100644
--- a/packages/web/src/visualizations/__stories__/ProgressCircle.stories.tsx
+++ b/packages/web/src/visualizations/__stories__/ProgressCircle.stories.tsx
@@ -372,3 +372,14 @@ export const Thin = () => {
);
};
+
+export const DisableAnimateOnMount = () => {
+ return (
+
+ {({ calculateProgress }) => (
+
+ )}
+
+ );
+};
+DisableAnimateOnMount.parameters = { percy: { enableJavaScript: true } };
diff --git a/packages/web/src/visualizations/__tests__/ProgressCircle.test.tsx b/packages/web/src/visualizations/__tests__/ProgressCircle.test.tsx
index e7c8740d5..dd301eb22 100644
--- a/packages/web/src/visualizations/__tests__/ProgressCircle.test.tsx
+++ b/packages/web/src/visualizations/__tests__/ProgressCircle.test.tsx
@@ -237,4 +237,24 @@ describe('ProgressCircle tests', () => {
expect(screen.queryByText(`${customText} ${progress * 100}%`)).toBeNull();
expect(screen.queryByTestId('custom-content-node')).toBeNull();
});
+
+ it('skips mount animation when disableAnimateOnMount is true', () => {
+ const size = 100;
+ const progress = 0.5;
+ render(
+
+
+ ,
+ );
+
+ const circumference = getCircumference(getRadius(size, 4));
+ const expectedOffset = (1 - progress) * circumference;
+ const innerCircle = screen.getByTestId('cds-progress-circle-inner');
+
+ // Should start at target offset, not at circumference (empty)
+ expect(innerCircle).toHaveAttribute('stroke-dashoffset', expectedOffset.toString());
+
+ // Should show target percentage immediately, not animate from 0
+ expect(screen.getAllByText('50%').length).toBeGreaterThan(0);
+ });
});