coinbase · bpk9 · Dec 30, 2025 · Dec 31, 2025 · Dec 31, 2025 · Jan 2, 2026
diff --git 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.
 
 <!-- template-start -->
 
+## 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
@@ -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
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 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
@@ -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
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 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
@@ -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
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 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
@@ -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
@@ -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 (
-      <ProgressTextLabel color={color} disabled={disabled} value={Math.round(progress * 100)} />
+      <ProgressTextLabel
+        color={color}
+        disableAnimateOnMount={disableAnimateOnMount}
+        disabled={disabled}
+        value={Math.round(progress * 100)}
+      />
     );
   },
 );
diff --git 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<ProgressCircleBaseProps, 'progress' | 'disabled'> & {
+export type ProgressCircleContentProps = Pick<
+  ProgressCircleBaseProps,
+  'progress' | 'disableAnimateOnMount' | 'disabled'
+> & {
   /**
    * Custom text color.
    * @default fgMuted
@@ -109,7 +112,7 @@ export type ProgressCircleContentProps = Pick<ProgressCircleBaseProps, 'progress
 
 type ProgressInnerCircleProps = Pick<
   ProgressCircleBaseProps,
-  'progress' | 'onAnimationEnd' | 'onAnimationStart'
+  'progress' | 'onAnimationEnd' | 'onAnimationStart' | 'disableAnimateOnMount'
 > &
   Required<Pick<ProgressCircleBaseProps, 'size' | 'weight' | 'color'>> & {
     visuallyDisabled?: boolean;
@@ -128,6 +131,7 @@ const ProgressCircleInner = memo(
     className,
     onAnimationEnd,
     onAnimationStart,
+    disableAnimateOnMount,
   }: ProgressInnerCircleProps) => {
     const strokeWidth = useProgressSize(weight);
     const circleRef = useRef<SVGCircleElement>(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(
                   <ProgressCircleInner
                     className={classNames?.progress}
                     color={color}
+                    disableAnimateOnMount={disableAnimateOnMount}
                     onAnimationEnd={onAnimationEnd}
                     onAnimationStart={onAnimationStart}
                     progress={progress}
@@ -266,7 +274,11 @@ export const ProgressCircle = memo(
                       width="100%"
                     >
                       {contentNode ?? (
-                        <DefaultProgressCircleContent disabled={disabled} progress={progress} />
+                        <DefaultProgressCircleContent
+                          disableAnimateOnMount={disableAnimateOnMount}
+                          disabled={disabled}
+                          progress={progress}
+                        />
                       )}
                     </Box>
                   </Box>

diff --git 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<ProgressBaseProps, 'disabled'> & {
+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<ProgressBaseProps, 'disabled'> & {
 };
 
 export const ProgressTextLabel = memo(
-  ({ value, renderLabel, disabled, color, style, className }: ProgressTextLabelProps) => {
-    const { getPreviousValue, addPreviousValue } = usePreviousValues<number>([0]);
+  ({
+    value,
+    renderLabel,
+    disableAnimateOnMount,
+    disabled,
+    color,
+    style,
+    className,
+  }: ProgressTextLabelProps) => {
+    const { getPreviousValue, addPreviousValue } = usePreviousValues<number>([
+      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
@@ -372,3 +372,14 @@ export const Thin = () => {
     </ProgressContainerWithButtons>
   );
 };
+
+export const DisableAnimateOnMount = () => {
+  return (
+    <ProgressContainerWithButtons>
+      {({ calculateProgress }) => (
+        <ProgressCircle disableAnimateOnMount progress={calculateProgress(0.8)} size={100} />
+      )}
+    </ProgressContainerWithButtons>
+  );
+};
+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
@@ -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(
+      <DefaultThemeProvider>
+        <ProgressCircle disableAnimateOnMount progress={progress} size={size} />
+      </DefaultThemeProvider>,
+    );
+
+    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);
+  });
 });