Adds simple animated fabric activityIndicator

change/react-native-windows-3e148754-c37f-47ca-ba18-1dc6bbbd3865.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add default static activityIndicator",
+  "packageName": "react-native-windows",
+  "email": "tatianakapos@microsoft.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/CompositionSwitcher.idl

@@ -92,6 +92,13 @@ namespace Microsoft.ReactNative.Composition
     void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);
   }
 
+  [webhosthidden]
+  [experimental]
+  runtimeclass ActivityVisual : IVisual
+  {
+    void updateColor(Windows.UI.Color color);
+  }
+
   [webhosthidden]
   [uuid("a74bfffc-7f2d-432f-8291-654782ab0d52")] // uuid needed for empty interfaces
   [version(1)]
@@ -129,6 +136,7 @@ namespace Microsoft.ReactNative.Composition
 
     SpriteVisual CreateSpriteVisual();
     ScrollVisual CreateScrollerVisual();
+    ActivityVisual CreateActivityVisual();
     ICaretVisual CreateCaretVisual();
     IFocusVisual CreateFocusVisual();
     IDropShadow CreateDropShadow();

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

@@ -0,0 +1,129 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "ActivityIndicatorComponentView.h"
+#include "CompositionDynamicAutomationProvider.h"
+
+#include <Windows.UI.Composition.h>
+#include <Windows.h>
+#include "CompositionContextHelper.h"
+
+namespace Microsoft::ReactNative {
+
+std::shared_ptr<ActivityIndicatorComponentView> ActivityIndicatorComponentView::Create(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
+  return std::shared_ptr<ActivityIndicatorComponentView>(
+      new ActivityIndicatorComponentView(compContext, tag, reactContext));
+}
+
+ActivityIndicatorComponentView::ActivityIndicatorComponentView(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : Super(compContext, tag), m_context(reactContext) {
+  m_props = std::make_shared<facebook::react::ActivityIndicatorViewProps const>();
+}
+
+void ActivityIndicatorComponentView::mountChildComponentView(
+    IComponentView &childComponentView,
+    uint32_t index) noexcept {
+  assert(false);
+}
+
+void ActivityIndicatorComponentView::unmountChildComponentView(
+    IComponentView &childComponentView,
+    uint32_t index) noexcept {
+  assert(false);
+}
+
+void ActivityIndicatorComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
+  Super::handleCommand(commandName, arg);
+}
+
+void ActivityIndicatorComponentView::updateProps(
+    facebook::react::Props::Shared const &props,
+    facebook::react::Props::Shared const &oldProps) noexcept {
+  const auto oldViewProps = std::static_pointer_cast<const facebook::react::ActivityIndicatorViewProps>(m_props);
+  const auto newViewProps = std::static_pointer_cast<const facebook::react::ActivityIndicatorViewProps>(props);
+
+  ensureVisual();
+
+  // update color if needed
+  if (newViewProps->color && (!oldProps || newViewProps->color != oldViewProps->color)) {
+    m_ActivityIndicatorVisual.updateColor(newViewProps->color.AsWindowsColor());
+  }
+
+  updateBorderProps(*oldViewProps, *newViewProps);
+  m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
+}
+
+void ActivityIndicatorComponentView::updateState(
+    facebook::react::State::Shared const &state,
+    facebook::react::State::Shared const &oldState) noexcept {}
+
+void ActivityIndicatorComponentView::updateLayoutMetrics(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
+  // Set Position & Size Properties
+  ensureVisual();
+
+  if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) {
+    OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
+  }
+
+  updateBorderLayoutMetrics(layoutMetrics, *m_props);
+  m_layoutMetrics = layoutMetrics;
+
+  UpdateCenterPropertySet();
+  m_visual.Size(
+      {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
+       layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+}
+
+void ActivityIndicatorComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {}
+
+void ActivityIndicatorComponentView::prepareForRecycle() noexcept {}
+
+facebook::react::Props::Shared ActivityIndicatorComponentView::props() noexcept {
+  return m_props;
+}
+
+void ActivityIndicatorComponentView::ensureVisual() noexcept {
+  if (!m_visual) {
+    m_visual = m_compContext.CreateSpriteVisual();
+    m_ActivityIndicatorVisual = m_compContext.CreateActivityVisual(); // creates COM control
+
+    OuterVisual().InsertAt(m_ActivityIndicatorVisual, 0);
+    OuterVisual().InsertAt(m_visual, 0);
+  }
+}
+
+facebook::react::Tag ActivityIndicatorComponentView::hitTest(
+    facebook::react::Point pt,
+    facebook::react::Point &localPt,
+    bool ignorePointerEvents) const noexcept {
+  facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
+
+  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+       m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
+      ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 &&
+      ptLocal.y <= m_layoutMetrics.frame.size.height) {
+    localPt = ptLocal;
+    return tag();
+  }
+  return -1;
+}
+
+winrt::Microsoft::ReactNative::Composition::IVisual ActivityIndicatorComponentView::Visual() const noexcept {
+  return m_visual;
+}
+
+bool ActivityIndicatorComponentView::focusable() const noexcept {
+  return false;
+}
+
+} // namespace Microsoft::ReactNative

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

@@ -0,0 +1,58 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <Fabric/ComponentView.h>
+#include <Microsoft.ReactNative.Cxx/ReactContext.h>
+
+#include "CompositionViewComponentView.h"
+
+#include <react/components/rnwcore/ShadowNodes.h>
+
+namespace Microsoft::ReactNative {
+
+struct ActivityIndicatorComponentView;
+
+struct ActivityIndicatorComponentView : CompositionBaseComponentView {
+  using Super = CompositionBaseComponentView;
+
+  [[nodiscard]] static std::shared_ptr<ActivityIndicatorComponentView> Create(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
+
+  void mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
+  void unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
+  void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept override;
+  void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept
+      override;
+  void updateState(facebook::react::State::Shared const &state, facebook::react::State::Shared const &oldState) noexcept
+      override;
+  void updateLayoutMetrics(
+      facebook::react::LayoutMetrics const &layoutMetrics,
+      facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
+  void finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept override;
+  void prepareForRecycle() noexcept override;
+  facebook::react::Props::Shared props() noexcept override;
+  bool focusable() const noexcept override;
+
+  facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt, bool ignorePointerEvents)
+      const noexcept override;
+  winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
+
+ private:
+  ActivityIndicatorComponentView(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext);
+
+  void ensureVisual() noexcept;
+
+  winrt::Microsoft::ReactNative::Composition::SpriteVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::ActivityVisual m_ActivityIndicatorVisual{nullptr};
+  winrt::Microsoft::ReactNative::ReactContext m_context;
+  facebook::react::SharedViewProps m_props;
+};
+
+} // namespace Microsoft::ReactNative

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

@@ -20,6 +20,7 @@
 #include <react/renderer/components/view/ViewShadowNode.h>
 
 #include <Fabric/Composition/AbiCompositionViewComponentView.h>
+#include <Fabric/Composition/ActivityIndicatorComponentView.h>
 #include <Fabric/Composition/CompositionHelpers.h>
 #include <Fabric/Composition/CompositionViewComponentView.h>
 #include <Fabric/Composition/ImageComponentView.h>
@@ -57,6 +58,8 @@ ComponentViewDescriptor const &ComponentViewRegistry::dequeueComponentViewWithCo
     view = WindowsTextInputComponentView::Create(compContext, tag, m_context);
   } else if (componentHandle == facebook::react::SwitchShadowNode::Handle()) {
     view = SwitchComponentView::Create(compContext, tag, m_context);
+  } else if (componentHandle == facebook::react::ActivityIndicatorViewShadowNode::Handle()) {
+    view = ActivityIndicatorComponentView::Create(compContext, tag, m_context);
   } else if (componentHandle == facebook::react::RootShadowNode::Handle()) {
     view = RootComponentView::Create(compContext, tag, m_context);
   } else if (