Scale loading bar text when island is super small (#14680)

acoates-ms · web-flow · commit 9a999fed88e0 · 2025-05-19T11:44:13.000-07:00
* Scale loading bar text when island is super small

* Change files
diff --git a/change/react-native-windows-ffcbc2ee-7f53-4f81-b199-38248cc85503.json b/change/react-native-windows-ffcbc2ee-7f53-4f81-b199-38248cc85503.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Scale loading bar text when island is super small",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.cpp
@@ -43,6 +43,7 @@ constexpr float loadingActivitySize = 12.0f;
 constexpr float loadingActivityHorizontalOffset = 16.0f;
 constexpr float loadingBarHeight = 36.0f;
 constexpr float loadingBarFontSize = 20.0f;
+constexpr float loadingBarMinFontSize = 8.0f;
 constexpr float loadingTextHorizontalOffset = 48.0f;
 
 //! This class ensures that we access ReactRootView from UI thread.
@@ -611,6 +612,14 @@ facebook::react::AttributedStringBox CreateLoadingAttributedString() noexcept {
   return facebook::react::AttributedStringBox{attributedString};
 }
 
+facebook::react::ParagraphAttributes CreateLoadingParagraphAttributes() noexcept {
+  facebook::react::ParagraphAttributes pa;
+  pa.adjustsFontSizeToFit = true;
+  pa.minimumFontSize = loadingBarMinFontSize;
+  pa.maximumFontSize = loadingBarFontSize;
+  return pa;
+}
+
 facebook::react::Size ReactNativeIsland::MeasureLoading(
     const winrt::Microsoft::ReactNative::LayoutConstraints &layoutConstraints) const noexcept {
   facebook::react::LayoutConstraints fbLayoutConstraints;
@@ -619,7 +628,7 @@ facebook::react::Size ReactNativeIsland::MeasureLoading(
   auto attributedStringBox = CreateLoadingAttributedString();
   winrt::com_ptr<::IDWriteTextLayout> textLayout;
   facebook::react::TextLayoutManager::GetTextLayout(
-      attributedStringBox, {} /*paragraphAttributes*/, fbLayoutConstraints, textLayout);
+      attributedStringBox, CreateLoadingParagraphAttributes(), fbLayoutConstraints, textLayout);
 
   DWRITE_TEXT_METRICS tm;
   winrt::check_hresult(textLayout->GetMetrics(&tm));
@@ -701,7 +710,7 @@ Composition::Experimental::IDrawingSurfaceBrush ReactNativeIsland::CreateLoading
 
       winrt::com_ptr<::IDWriteTextLayout> textLayout;
       facebook::react::TextLayoutManager::GetTextLayout(
-          attributedStringBox, {} /*paragraphAttributes*/, constraints, textLayout);
+          attributedStringBox, CreateLoadingParagraphAttributes(), constraints, textLayout);
 
       DWRITE_TEXT_METRICS tm;
       textLayout->GetMetrics(&tm);
