[Fabric] Implement hidesWhenStopped in ActivityIndicator (#14615)

anupriya13 · web-flow · commit 0ab2ba16e160 · 2025-04-25T20:27:47.000+05:30
diff --git a/change/react-native-windows-cf845cf7-d1f3-4312-b6bf-bfbc99c7eaf6.json b/change/react-native-windows-cf845cf7-d1f3-4312-b6bf-bfbc99c7eaf6.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Implement hidesWhenStopped in ActivityIndicator",
+  "packageName": "react-native-windows",
+  "email": "54227869+anupriya13@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/playground/Samples/index.tsx b/packages/playground/Samples/index.tsx
@@ -141,6 +141,7 @@ export default class Bootstrap extends React.Component<
     switchIsOn: boolean;
     highlightPressed: boolean;
     mouseEntered: boolean;
+    isAnimating: boolean;
   }
 > {
   constructor(props: {}) {
@@ -151,11 +152,18 @@ export default class Bootstrap extends React.Component<
       mouseEntered: false,
       switchIsOn: true,
       highlightPressed: false,
+      isAnimating: false,
     };
   }
 
   inputRef: React.RefObject<TextInput | null>;
 
+  toggleAnimation = () => {
+    this.setState(prevState => ({
+      isAnimating: !prevState.isAnimating,
+    }));
+  };
+
   render() {
     return (
       <ScrollView>
@@ -199,7 +207,26 @@ export default class Bootstrap extends React.Component<
             </View>
           </ScrollView>
           <TicTacButton />
-          <ActivityIndicator size="large" color="green" />
+          <ActivityIndicator
+            size="large"
+            color="green"
+            animating={this.state.isAnimating}
+            hidesWhenStopped={false}
+          />
+          <ActivityIndicator
+            size="large"
+            color="green"
+            animating={this.state.isAnimating}
+            hidesWhenStopped={true}
+          />
+          <View>
+            <Button
+              title={
+                this.state.isAnimating ? 'Stop Animation' : 'Start Animation'
+              }
+              onPress={this.toggleAnimation}
+            />
+          </View>
           <Text style={{marginTop: 15}}>Big Border & Clipping Tests:</Text>
           <View style={{flexDirection: 'row'}}>
             <View style={{flexDirection: 'column', alignItems: 'center'}}>
diff --git a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl b/vnext/Microsoft.ReactNative/CompositionSwitcher.idl
@@ -127,6 +127,8 @@ namespace Microsoft.ReactNative.Composition.Experimental
   {
     void Size(Single value);
     void Brush(IBrush brush);
+    void StartAnimation();
+    void StopAnimation();
   }
 
   [webhosthidden]
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.cpp
@@ -67,8 +67,18 @@ void ActivityIndicatorComponentView::updateProps(
     updateProgressColor(newViewProps->color);
   }
 
-  if (newViewProps->animating != oldViewProps->animating) {
-    m_ActivityIndicatorVisual.IsVisible(newViewProps->animating);
+  if (newViewProps->animating != oldViewProps->animating ||
+      newViewProps->hidesWhenStopped != oldViewProps->hidesWhenStopped) {
+    bool setHidden = (newViewProps->hidesWhenStopped && !newViewProps->animating);
+    m_ActivityIndicatorVisual.IsVisible(!setHidden);
+
+    if (!newViewProps->animating && !newViewProps->hidesWhenStopped) {
+      m_animationStopped = true;
+      m_ActivityIndicatorVisual.StopAnimation();
+    } else if (m_animationStopped) {
+      m_ActivityIndicatorVisual.StartAnimation();
+      m_animationStopped = false;
+    }
   }
 }
 
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.h
@@ -53,6 +53,8 @@ struct ActivityIndicatorComponentView
   void updateVisualSize() noexcept;
   void updateProgressColor(const facebook::react::SharedColor &color) noexcept;
 
+  bool m_animationStopped{false};
+
   winrt::Microsoft::ReactNative::Composition::Experimental::IActivityVisual m_ActivityIndicatorVisual{nullptr};
 };
 
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
@@ -1389,16 +1389,7 @@ struct CompActivityVisual : winrt::implements<
     _themeProperties.InsertVector4(L"Foreground", ColorAsVector4({0, 0, 0, 0}));
 
     visual.Children().InsertAtTop(Root());
-
-    auto easing = _c.CreateLinearEasingFunction();
-    const auto progressAnimation = _c.CreateScalarKeyFrameAnimation();
-    progressAnimation.Duration(winrt::Windows::Foundation::TimeSpan{c_durationTicks});
-    progressAnimation.InsertKeyFrame(0.0f, 0.0f);
-    progressAnimation.InsertKeyFrame(1.0f, 1.0f, easing);
-    progressAnimation.IterationBehavior(TTypeRedirects::AnimationIterationBehavior::Forever);
-
-    _root.Properties().StartAnimation(L"Progress", progressAnimation);
-    _root.StartAnimation(L"Progress", progressAnimation);
+    StartAnimation();
   }
 
   void Brush(winrt::Microsoft::ReactNative::Composition::Experimental::IBrush brush) noexcept {
@@ -1524,6 +1515,24 @@ struct CompActivityVisual : winrt::implements<
     SetAnimationClass<TTypeRedirects>(value, m_visual);
   }
 
+  void StartAnimation() noexcept {
+    auto easing = _c.CreateLinearEasingFunction();
+    const auto progressAnimation = _c.CreateScalarKeyFrameAnimation();
+    progressAnimation.Duration(winrt::Windows::Foundation::TimeSpan{c_durationTicks});
+    progressAnimation.InsertKeyFrame(0.0f, 0.0f);
+    progressAnimation.InsertKeyFrame(1.0f, 1.0f, easing);
+    progressAnimation.IterationBehavior(TTypeRedirects::AnimationIterationBehavior::Forever);
+
+    _root.Properties().StartAnimation(L"Progress", progressAnimation);
+    _root.StartAnimation(L"Progress", progressAnimation);
+  }
+
+  void StopAnimation() noexcept {
+    _root.Properties().InsertScalar(L"Progress", 0.7f);
+    _root.Properties().StopAnimation(L"Progress");
+    _root.StopAnimation(L"Progress");
+  }
+
  private:
   typename TTypeRedirects::SpriteVisual m_visual{nullptr};
   typename TTypeRedirects::SpriteVisual m_contentVisual{nullptr};

Original file line number	Diff line number	Diff line change
`@@ -127,6 +127,8 @@ namespace Microsoft.ReactNative.Composition.Experimental`
`127`	`127`	`{`
`128`	`128`	`void Size(Single value);`
`129`	`129`	`void Brush(IBrush brush);`
	`130`	`+ void StartAnimation();`
	`131`	`+ void StopAnimation();`
`130`	`132`	`}`
`131`	`133`
`132`	`134`	`[webhosthidden]`
Original file line number	Diff line number	Diff line change
`@@ -67,8 +67,18 @@ void ActivityIndicatorComponentView::updateProps(`
`67`	`67`	`updateProgressColor(newViewProps->color);`
`68`	`68`	`}`
`69`	`69`
`70`		`- if (newViewProps->animating != oldViewProps->animating) {`
`71`		`- m_ActivityIndicatorVisual.IsVisible(newViewProps->animating);`
	`70`	`+ if (newViewProps->animating != oldViewProps->animating \|\|`
	`71`	`+ newViewProps->hidesWhenStopped != oldViewProps->hidesWhenStopped) {`
	`72`	`+ bool setHidden = (newViewProps->hidesWhenStopped && !newViewProps->animating);`
	`73`	`+ m_ActivityIndicatorVisual.IsVisible(!setHidden);`
	`74`	`+`
	`75`	`+ if (!newViewProps->animating && !newViewProps->hidesWhenStopped) {`
	`76`	`+ m_animationStopped = true;`
	`77`	`+ m_ActivityIndicatorVisual.StopAnimation();`
	`78`	`+ } else if (m_animationStopped) {`
	`79`	`+ m_ActivityIndicatorVisual.StartAnimation();`
	`80`	`+ m_animationStopped = false;`
	`81`	`+ }`
`72`	`82`	`}`
`73`	`83`	`}`
`74`	`84`