[Fabric] Implement hidesWhenStopped in ActivityIndicator (#14615)

Author: anupriya13

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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'}}>

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]

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;
+    }
   }
 }
 

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};
 };
 

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};