Update README loading text (#6169)

* Add loading spinner * update casing * moved accessible loading text to binding. Moved where content for markdown preview is set. * remove unneeded name
NuGet · Dec 5, 2024 · a1c3ba6 · a1c3ba6
1 parent 956217b
commit a1c3ba6
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 6 deletions.
diff --git a/src/NuGet.Clients/NuGet.PackageManagement.UI/Resources.Designer.cs b/src/NuGet.Clients/NuGet.PackageManagement.UI/Resources.Designer.cs
diff --git a/src/NuGet.Clients/NuGet.PackageManagement.UI/Resources.resx b/src/NuGet.Clients/NuGet.PackageManagement.UI/Resources.resx
@@ -279,6 +279,12 @@
   <data name="Text_Loading" xml:space="preserve">
     <value>Loading...</value>
   </data>
+  <data name="Text_LoadingReadme" xml:space="preserve">
+    <value>Loading README...</value>
+  </data>
+  <data name="Text_ReadmeLoaded" xml:space="preserve">
+    <value>README loaded</value>
+  </data>
   <data name="Text_NoPackagesFound" xml:space="preserve">
     <value>No packages found</value>
   </data>
@@ -1093,4 +1099,4 @@ Only the package maintainer can add a README. If you are not the maintainer, ple
 For instructions on how to add a README, please visit [aka.ms/nuget/readme](https://aka.ms/nuget/readme)</value>
     <comment>{Locked="[aka.ms/nuget/readme](https://aka.ms/nuget/readme)"} "[aka.ms/nuget/readme](https://aka.ms/nuget/readme)" this is a URL link and should not be translated</comment>
   </data>
-</root>
+</root>
diff --git a/src/NuGet.Clients/NuGet.PackageManagement.UI/Xamls/PackageReadmeControl.xaml b/src/NuGet.Clients/NuGet.PackageManagement.UI/Xamls/PackageReadmeControl.xaml
@@ -9,6 +9,7 @@
   xmlns:imagingTheme="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Imaging"
   xmlns:catalog="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.ImageCatalog"
   xmlns:ui="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Utilities"
+  xmlns:vs="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.15.0"
   Background="{DynamicResource {x:Static nuget:Brushes.DetailPaneBackground}}"
   Foreground="{DynamicResource {x:Static nuget:Brushes.UIText}}"
   DataContextChanged="UserControl_DataContextChanged"
@@ -31,10 +32,46 @@
       ClipToBounds="True"
       Focusable="False"
       Visibility="{Binding Path=IsReadmeReady, Mode=OneWay, Converter={StaticResource BooleanToVisibilityConverter}}" />
-    <TextBlock
-      TextWrapping="Wrap"
-      Text="{x:Static nuget:Resources.Text_Loading}"
-      Visibility="{Binding Path=IsBusy, Mode=OneWay, Converter={StaticResource BooleanToVisibilityConverter}}" />
+    <Grid
+      HorizontalAlignment="Center"
+      VerticalAlignment="Center"
+      Visibility="{Binding Path=IsBusy, Mode=OneWay, Converter={StaticResource BooleanToVisibilityConverter}}" >
+      <Grid.ColumnDefinitions>
+        <ColumnDefinition Width="Auto"/>
+        <ColumnDefinition Width="Auto"/>
+      </Grid.ColumnDefinitions>
+      <nuget:Spinner
+        Grid.Column="0"
+        Height="20"
+        Width="20"/>
+      <TextBlock
+        Padding="10,0,0,0"
+        Grid.Column="1"
+        TextWrapping="Wrap"
+        Text="{x:Static nuget:Resources.Text_LoadingReadme}" />
+      <!--
+        Special TextBlock to report loading status to assistive technologies (narrator).
+        Code behind changes to the Text property will trigger a narrator event.
+      -->
+      <vs:LiveTextBlock
+        Visibility="Collapsed"
+        IsFrequencyLimited="True"
+        Focusable="False"
+        AutomationProperties.IsOffscreenBehavior="Offscreen">
+        <vs:LiveTextBlock.Resources>
+          <Style TargetType="vs:LiveTextBlock">
+            <Style.Triggers>
+              <DataTrigger Binding="{Binding Path=IsBusy}" Value="True">
+                <Setter Property="Text" Value="{x:Static nuget:Resources.Text_LoadingReadme}"/>
+              </DataTrigger>
+              <DataTrigger Binding="{Binding Path=IsBusy}" Value="False">
+                <Setter Property="Text" Value="{x:Static nuget:Resources.Text_ReadmeLoaded}"/>
+              </DataTrigger>
+            </Style.Triggers>
+          </Style>
+        </vs:LiveTextBlock.Resources>
+      </vs:LiveTextBlock>
+    </Grid>
     <TextBlock
       TextWrapping="Wrap"
       Text="{x:Static nuget:Resources.Error_UnableToLoadReadme}"

diff --git a/src/NuGet.Clients/NuGet.PackageManagement.UI/Xamls/PackageReadmeControl.xaml.cs b/src/NuGet.Clients/NuGet.PackageManagement.UI/Xamls/PackageReadmeControl.xaml.cs
@@ -29,7 +29,6 @@ public PackageReadmeControl()
 #pragma warning disable CS0618 // Type or member is obsolete
             _markdownPreview = new PreviewBuilder().Build();
 #pragma warning restore CS0618 // Type or member is obsolete
-            descriptionMarkdownPreview.Content = _markdownPreview.VisualElement;
         }
 
         public ReadmePreviewViewModel ReadmeViewModel { get => (ReadmePreviewViewModel)DataContext; }
@@ -71,6 +70,7 @@ private async Task UpdateMarkdownAsync()
         {
             try
             {
+                descriptionMarkdownPreview.Content = descriptionMarkdownPreview.Content ?? _markdownPreview.VisualElement;
                 if (!string.IsNullOrWhiteSpace(ReadmeViewModel.ReadmeMarkdown))
                 {
                     await _markdownPreview.UpdateContentAsync(ReadmeViewModel.ReadmeMarkdown, ScrollHint.None);