[Fabric] Update ActivityIndicator to newer visuals (#12865)

* [Fabric] Update ActivityIndicator to newer visuals

* Change files

Author: acoates-ms

change/react-native-windows-5a089490-fcc0-472b-8823-55b5345df063.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Update ActivityIndicator to newer visuals",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.cpp

@@ -62,15 +62,6 @@ void ActivityIndicatorComponentView::updateProps(
     m_visual.Comment(winrt::to_hstring(newViewProps->testId));
   }
 
-  // update size if needed
-  if (newViewProps->size != oldViewProps->size) {
-    if (newViewProps->size == facebook::react::ActivityIndicatorViewSize::Small) {
-      m_ActivityIndicatorVisual.Size(m_radiusSmall);
-    } else {
-      m_ActivityIndicatorVisual.Size(m_radiusLarge);
-    }
-  }
-
   // update color if needed
   if (!oldProps || newViewProps->color != oldViewProps->color) {
     updateProgressColor(newViewProps->color);
@@ -85,6 +76,19 @@ void ActivityIndicatorComponentView::updateProps(
   m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
 }
 
+void ActivityIndicatorComponentView::FinalizeUpdates(
+    winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept {
+  static constexpr float radiusSmall = 10.0f;
+  static constexpr float radiusLarge = 18.0f;
+
+  if (std::static_pointer_cast<const facebook::react::ActivityIndicatorViewProps>(m_props)->size ==
+      facebook::react::ActivityIndicatorViewSize::Small) {
+    m_ActivityIndicatorVisual.Size(radiusSmall * m_layoutMetrics.pointScaleFactor);
+  } else {
+    m_ActivityIndicatorVisual.Size(radiusLarge * m_layoutMetrics.pointScaleFactor);
+  }
+}
+
 void ActivityIndicatorComponentView::updateState(
     facebook::react::State::Shared const &state,
     facebook::react::State::Shared const &oldState) noexcept {}
@@ -114,7 +118,7 @@ facebook::react::SharedViewProps ActivityIndicatorComponentView::viewProps() noe
 void ActivityIndicatorComponentView::ensureVisual() noexcept {
   if (!m_visual) {
     m_visual = m_compContext.CreateSpriteVisual();
-    m_ActivityIndicatorVisual = m_compContext.CreateActivityVisual(); // creates COM control
+    m_ActivityIndicatorVisual = m_compContext.CreateActivityVisual();
 
     OuterVisual().InsertAt(m_ActivityIndicatorVisual, 0);
     OuterVisual().InsertAt(m_visual, 0);

vnext/Microsoft.ReactNative/Fabric/Composition/ActivityIndicatorComponentView.h

@@ -34,6 +34,7 @@ struct ActivityIndicatorComponentView : ActivityIndicatorComponentViewT<Activity
   void updateLayoutMetrics(
       facebook::react::LayoutMetrics const &layoutMetrics,
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
+  void FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept override;
   void prepareForRecycle() noexcept override;
   facebook::react::SharedViewProps viewProps() noexcept override;
   bool focusable() const noexcept override;
@@ -51,13 +52,12 @@ struct ActivityIndicatorComponentView : ActivityIndicatorComponentViewT<Activity
 
  private:
   void ensureVisual() noexcept;
+  void updateVisualSize() noexcept;
   void updateProgressColor(const facebook::react::SharedColor &color) noexcept;
 
   winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
   winrt::Microsoft::ReactNative::Composition::IActivityVisual m_ActivityIndicatorVisual{nullptr};
   facebook::react::SharedViewProps m_props;
-  float m_radiusSmall = 8.0f;
-  float m_radiusLarge = 16.0f;
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation