fix(react-tabs): fix active tab indicator animation (#34060)

Author: dmytrokirpa

change/@fluentui-react-tabs-a6fc5216-fff0-4797-8b51-29ea6b6e1455.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: fix active tab indicator animation",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tabs/library/src/components/Tab/useTabAnimatedIndicator.styles.ts

@@ -5,6 +5,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import { useTabListContext_unstable } from '../TabList/TabListContext';
 import { TabRegisterData } from '../TabList/TabList.types';
 import { tokens } from '@fluentui/react-theme';
+import { useAnimationFrame } from '@fluentui/react-utilities';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const tabIndicatorCssVars_unstable = {
@@ -80,11 +81,7 @@ export const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabStat
   const [animationValues, setAnimationValues] = React.useState({ offset: 0, scale: 1 });
   const getRegisteredTabs = useTabListContext_unstable(ctx => ctx.getRegisteredTabs);
 
-  React.useEffect(() => {
-    if (isValueDefined(lastAnimatedFrom)) {
-      setAnimationValues({ offset: 0, scale: 1 });
-    }
-  }, [lastAnimatedFrom]);
+  const [requestAnimationFrame] = useAnimationFrame();
 
   if (selected) {
     const { previousSelectedValue, selectedValue, registeredTabs } = getRegisteredTabs();
@@ -104,6 +101,9 @@ export const useTabAnimatedIndicatorStyles_unstable = (state: TabState): TabStat
 
         setAnimationValues({ offset, scale });
         setLastAnimatedFrom(previousSelectedValue);
+
+        // Reset the animation values after the animation is complete
+        requestAnimationFrame(() => setAnimationValues({ offset: 0, scale: 1 }));
       }
     }
   } else if (isValueDefined(lastAnimatedFrom)) {