Updates

guardrex · guardrex · commit 00b901c4ab32 · 2025-04-04T10:51:23.000-04:00
diff --git a/aspnetcore/blazor/components/lifecycle.md b/aspnetcore/blazor/components/lifecycle.md
@@ -840,7 +840,7 @@ Create a loading indicator component with a `Loading` parameter that can display
 ```razor
 @if (Loading)
 {
-    <progress id="progress-bar" aria-label="Content loading…"></progress>
+    <progress id="loadingIndicator" aria-label="Content loading…"></progress>
 }
 else
 {
@@ -868,7 +868,7 @@ If you wish to load styles for the indicator, add them to `<head>` content with
             ...
         </style>
     </HeadContent>
-    <progress id="progress-bar" aria-label="Content loading…"></progress>
+    <progress id="loadingIndicator" aria-label="Content loading…"></progress>
 }
 else
 {
diff --git a/aspnetcore/blazor/components/rendering.md b/aspnetcore/blazor/components/rendering.md
@@ -326,4 +326,4 @@ The state manager approach is similar to the earlier case with <xref:System.Time
 <!-- UPDATE 10.0 Will be removed for a new feature in this area. 
                  Tracked by: https://github.com/dotnet/aspnetcore/issues/49056 -->
 
-A loading progress indicator isn't present in an app created from the Blazor Web App project template. A new loading progress indicator feature is planned for a future release of .NET. In the meantime, an app can adopt custom code to create a loading progress indicator. For more information, see <xref:blazor/fundamentals/startup#client-side-loading-progress-indicators>.
+A loading progress indicator isn't present in an app created from the Blazor Web App project template. A new loading progress indicator feature is planned for a future release of .NET. In the meantime, an app can adopt custom code to create a loading progress indicator. For more information, see <xref:blazor/fundamentals/startup#client-side-loading-indicators>.
diff --git a/aspnetcore/blazor/fundamentals/startup.md b/aspnetcore/blazor/fundamentals/startup.md
@@ -592,9 +592,9 @@ app.MapFallbackToFile("index.html", staticFileOptions);
 
 :::moniker range=">= aspnetcore-7.0"
 
-## Client-side loading progress indicators
+## Client-side loading indicators
 
-A loading progress indicator shows the loading progress of the app to users, indicating that the app is loading normally and that the user should wait until loading is finished.
+A loading indicator shows that the app is loading normally and that the user should wait until loading is finished.
 
 :::moniker-end
 
@@ -635,7 +635,7 @@ If you wish to load styles for the indicator, add them to `<head>` content with
         </style>
     </HeadContent>
     -->
-    <progress id="progress-bar" aria-label="Content loading…"></progress>
+    <progress id="loadingIndicator" aria-label="Content loading…"></progress>
 }
 else
 {
@@ -682,7 +682,7 @@ In a component that adopts Interactive WebAssembly rendering, wrap the component
 
 Create a `ContentLoading` component in the `Layout` folder of the `.Client` app that calls <xref:Microsoft.AspNetCore.Components.RendererInfo.IsInteractive?displayProperty=nameWithType>:
 
-* When `false`, display a loading progress indicator.
+* When `false`, display a loading indicator.
 * When `true`, render the requested component's content.
 
 If you wish to load styles for the indicator, add them to `<head>` content with the <xref:Microsoft.AspNetCore.Components.Web.HeadContent> component. For more information, see <xref:blazor/components/control-head-content>.
@@ -699,7 +699,7 @@ If you wish to load styles for the indicator, add them to `<head>` content with
         </style>
     </HeadContent>
     -->
-    <progress id="progress-bar" aria-label="Content loading…"></progress>
+    <progress id="loadingIndicator" aria-label="Content loading…"></progress>
 }
 else
 {
@@ -728,22 +728,22 @@ In `Layout/MainLayout.razor`:
 
 Add a [JavaScript initializer](#javascript-initializers) to the app. In the following JavaScript module file name example, the `{ASSEMBLY NAME}` placeholder is the assembly name of the server project (for example, `BlazorSample`). The `wwwroot` folder where the module is placed is the `wwwroot` folder in the server-side project, not the `.Client` project.
 
-The following example uses a [`progress`](https://developer.mozilla.org/docs/Web/HTML/Element/progress) indicator that doesn't indicate specific progress as [client-side boot resources are delivered to the client](#load-client-side-boot-resources), but it serves as a general approach for further development if you want the progress indicator to show the actual progress.
+The following example uses a [`progress`](https://developer.mozilla.org/docs/Web/HTML/Element/progress) indicator that doesn't indicate specific progress as [client-side boot resources are delivered to the client](#load-client-side-boot-resources), but it serves as a general approach for further development if you want the progress indicator to show the actual progress of loading the app's boot resources.
 
 `wwwroot/{ASSEMBLY NAME}.lib.module.js`:
 
 ```javascript
 export function beforeWebStart(options) {
   var progress = document.createElement("progress");
-  progress.id = 'progressBar';
+  progress.id = 'loadingIndicator';
   progress.ariaLabel = 'Blazor loading…';
   progress.style = 'position:absolute;top:50%;left:50%;margin-right:-50%;' +
     'transform:translate(-50%,-50%);';
   document.body.appendChild(progress);
 }
 
 export function afterWebAssemblyStarted(blazor) {
-  var progress = document.getElementById('progressBar');
+  var progress = document.getElementById('loadingIndicator');
   progress.remove();
 }
 ```
@@ -771,7 +771,7 @@ Replace the `<script>` tag with the following markup that starts Blazor manually
 </script>
 ```
 
-If you notice a short delay between the loading indicator removal and the first page render, you can guarantee removal of the indicator after rendering by calling for indicator removal in the `MainLayout` component's [`OnAfterRenderAsync` lifecycle method](xref:blazor/components/lifecycle#after-component-render-onafterrenderasync). For more information and a code example, see [Document an approach for a loading indicator that works with global Interactive WebAssembly without prerendering (`dotnet/AspNetCore.Docs` #35111)](https://github.com/dotnet/AspNetCore.Docs/issues/35111#issuecomment-2778796998).
+If you notice a short delay between the loading indicator removal and the first page render, you can guarantee removal of the indicator after rendering by calling for indicator removal in the [`OnAfterRenderAsync` lifecycle method](xref:blazor/components/lifecycle#after-component-render-onafterrenderasync) of either the `MainLayout` or `Routes` components. For more information and a code example, see [Document an approach for a loading indicator that works with global Interactive WebAssembly without prerendering (`dotnet/AspNetCore.Docs` #35111)](https://github.com/dotnet/AspNetCore.Docs/issues/35111#issuecomment-2778796998).
 
 :::moniker-end
 

Original file line number	Diff line number	Diff line change
@@ -840,7 +840,7 @@ Create a loading indicator component with a `Loading` parameter that can display
`840`	`840`	```razor
`841`	`841`	`@if (Loading)`
`842`	`842`	`{`
`843`		`- <progress id="progress-bar" aria-label="Content loading…"></progress>`
	`843`	`+ <progress id="loadingIndicator" aria-label="Content loading…"></progress>`
`844`	`844`	`}`
`845`	`845`	`else`
`846`	`846`	`{`
@@ -868,7 +868,7 @@ If you wish to load styles for the indicator, add them to `<head>` content with
`868`	`868`	`...`
`869`	`869`	`</style>`
`870`	`870`	`</HeadContent>`
`871`		`- <progress id="progress-bar" aria-label="Content loading…"></progress>`
	`871`	`+ <progress id="loadingIndicator" aria-label="Content loading…"></progress>`
`872`	`872`	`}`
`873`	`873`	`else`
`874`	`874`	`{`