diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
index a89efe941..2c2165de3 100644
--- a/packages/polaris-viz/CHANGELOG.md
+++ b/packages/polaris-viz/CHANGELOG.md
@@ -10,6 +10,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
### Changed
- Fill missing values for SparkLine charts
+- Made `` animation delay based on slice count, not a set `index * 100ms`.
## [12.4.1] - 2024-04-03
diff --git a/packages/polaris-viz/src/components/Arc/Arc.tsx b/packages/polaris-viz/src/components/Arc/Arc.tsx
index f00e82ea3..1de745d92 100644
--- a/packages/polaris-viz/src/components/Arc/Arc.tsx
+++ b/packages/polaris-viz/src/components/Arc/Arc.tsx
@@ -29,12 +29,14 @@ export interface ArcProps {
color: Color;
cornerRadius: number;
thickness: number;
+ animationDelay?: number;
index?: number;
isAnimated: boolean;
activeIndex?: number;
}
export function Arc({
+ animationDelay = 100,
radius,
width,
height,
@@ -52,7 +54,7 @@ export function Arc({
const gradient = getGradientFromColor(color);
const springConfig = useSpringConfig({
- animationDelay: index * 100,
+ animationDelay: index * animationDelay,
shouldAnimate: isAnimated,
mountedSpringConfig: ARC_DATA_CHANGE_ANIMATION_CONFIG,
unmountedSpringConfig: ARC_LOAD_ANIMATION_CONFIG,
diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
index f955488f5..9f5e1407f 100644
--- a/packages/polaris-viz/src/components/DonutChart/Chart.tsx
+++ b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
@@ -17,6 +17,7 @@ import type {
Direction,
} from '@shopify/polaris-viz-core';
+import {getAnimationDelayForItems} from '../../utilities/getAnimationDelayForItems';
import {getContainerAlignmentForLegend} from '../../utilities';
import type {ComparisonMetricProps} from '../ComparisonMetric';
import {LegendContainer, useLegend} from '../../components/LegendContainer';
@@ -245,6 +246,9 @@ export function Chart({
>
= (args: DonutChartProps) => {
+ return ;
+};
+
+export const AnimationSpeed = Template.bind({});
+
+AnimationSpeed.args = {
+ data: [...Array(100).keys()].map((num) => {
+ return {
+ name: `${num}`,
+ data: [{key: 'april - march', value: 10}],
+ };
+ }),
+};
diff --git a/packages/polaris-viz/src/constants.ts b/packages/polaris-viz/src/constants.ts
index 8692ab321..b40a26510 100644
--- a/packages/polaris-viz/src/constants.ts
+++ b/packages/polaris-viz/src/constants.ts
@@ -60,3 +60,4 @@ export const IS_TEST = process.env.NODE_ENV === 'test';
export const WARN_FOR_DEVELOPMENT = IS_DEVELOPMENT && !IS_TEST;
export const HOVER_TARGET_ZONE = 48;
export const CROSSHAIR_ID = 'Crosshair';
+export const DEFAULT_ANIMATION_DELAY = 100;
diff --git a/packages/polaris-viz/src/utilities/getAnimationDelayForItems.ts b/packages/polaris-viz/src/utilities/getAnimationDelayForItems.ts
new file mode 100644
index 000000000..4ff41818b
--- /dev/null
+++ b/packages/polaris-viz/src/utilities/getAnimationDelayForItems.ts
@@ -0,0 +1,10 @@
+import {DEFAULT_ANIMATION_DELAY} from '../constants';
+
+export function getAnimationDelayForItems(count: number) {
+ const scalingFactor = count * 0.1;
+
+ return Math.min(
+ DEFAULT_ANIMATION_DELAY / scalingFactor,
+ DEFAULT_ANIMATION_DELAY,
+ );
+}
diff --git a/packages/polaris-viz/src/utilities/tests/getAnimationDelayForItems.test.ts b/packages/polaris-viz/src/utilities/tests/getAnimationDelayForItems.test.ts
new file mode 100644
index 000000000..b53068b6c
--- /dev/null
+++ b/packages/polaris-viz/src/utilities/tests/getAnimationDelayForItems.test.ts
@@ -0,0 +1,14 @@
+import {getAnimationDelayForItems} from '../getAnimationDelayForItems';
+
+describe('getAnimationDelayForItems()', () => {
+ it.each([
+ {count: 1, expected: 100},
+ {count: 10, expected: 100},
+ {count: 50, expected: 20},
+ {count: 100, expected: 10},
+ {count: 250, expected: 4},
+ {count: 1000, expected: 1},
+ ])('generates a delay for $count items', ({count, expected}) => {
+ expect(getAnimationDelayForItems(count)).toBe(expected);
+ });
+});