From 99a8fe1cc94595eedc77123b93967d6150dd8919 Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Tue, 14 Mar 2023 10:07:17 -0700
Subject: [PATCH 1/2] fix: Smooth out animation of indeterminate progress bar

---
 ...-f5145f44-c47b-4c22-a051-e884f22b88ce.json |  7 +++++
 .../ProgressBar/useProgressBarStyles.ts       | 28 +++++--------------
 2 files changed, 14 insertions(+), 21 deletions(-)
 create mode 100644 change/@fluentui-react-progress-f5145f44-c47b-4c22-a051-e884f22b88ce.json

diff --git a/change/@fluentui-react-progress-f5145f44-c47b-4c22-a051-e884f22b88ce.json b/change/@fluentui-react-progress-f5145f44-c47b-4c22-a051-e884f22b88ce.json
new file mode 100644
index 00000000000000..0b5d974af43105
--- /dev/null
+++ b/change/@fluentui-react-progress-f5145f44-c47b-4c22-a051-e884f22b88ce.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Smooth out animation of indeterminate progress bar",
+  "packageName": "@fluentui/react-progress",
+  "email": "behowell@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts
index ae72c534ae7c46..82b8ca839e8867 100644
--- a/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts
+++ b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts
@@ -1,6 +1,5 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -20,18 +19,10 @@ const barThicknessValues = {
 
 const indeterminateProgressBar = {
   '0%': {
-    left: '-100% /* @noflip */',
+    left: '-33%', // matches indeterminate bar width
   },
   '100%': {
-    left: '100% /* @noflip */',
-  },
-};
-const indeterminateProgressBarRTL = {
-  '100%': {
-    right: '-100% /* @noflip */',
-  },
-  '0%': {
-    right: '100% /* @noflip */',
+    left: '100%',
   },
 };
 
@@ -90,15 +81,12 @@ const useBarStyles = makeStyles({
     )`,
     animationName: indeterminateProgressBar,
     animationDuration: '3s',
+    animationTimingFunction: 'linear',
     animationIterationCount: 'infinite',
-    '@media screen and (prefers-reduced-motion: reduce)': {
-      animationDuration: '0.01ms',
-      animationIterationCount: '1',
-    },
-  },
-
-  rtl: {
-    animationName: indeterminateProgressBarRTL,
+    // '@media screen and (prefers-reduced-motion: reduce)': {
+    //   animationDuration: '0.01ms',
+    //   animationIterationCount: '1',
+    // },
   },
 
   brand: {
@@ -123,7 +111,6 @@ export const useProgressBarStyles_unstable = (state: ProgressBarState): Progress
   const { color, max, shape, thickness, value } = state;
   const rootStyles = useRootStyles();
   const barStyles = useBarStyles();
-  const { dir } = useFluent();
 
   state.root.className = mergeClasses(
     progressBarClassNames.root,
@@ -139,7 +126,6 @@ export const useProgressBarStyles_unstable = (state: ProgressBarState): Progress
       barStyles.base,
       barStyles.brand,
       value === undefined && barStyles.indeterminate,
-      value === undefined && dir === 'rtl' && barStyles.rtl,
       value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,
       color && value !== undefined && barStyles[color],
       state.bar.className,

From 703bb75a2f98c5e0b740abc738823fed523ddc12 Mon Sep 17 00:00:00 2001
From: Ben Howell <behowell@microsoft.com>
Date: Tue, 14 Mar 2023 10:11:08 -0700
Subject: [PATCH 2/2] Add back inadvertantly commented code

---
 .../src/components/ProgressBar/useProgressBarStyles.ts    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts
index 82b8ca839e8867..23b6ebd63d956e 100644
--- a/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts
+++ b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts
@@ -83,10 +83,10 @@ const useBarStyles = makeStyles({
     animationDuration: '3s',
     animationTimingFunction: 'linear',
     animationIterationCount: 'infinite',
-    // '@media screen and (prefers-reduced-motion: reduce)': {
-    //   animationDuration: '0.01ms',
-    //   animationIterationCount: '1',
-    // },
+    '@media screen and (prefers-reduced-motion: reduce)': {
+      animationDuration: '0.01ms',
+      animationIterationCount: '1',
+    },
   },
 
   brand: {