Return content loading global WASM example (#35532)

guardrex · web-flow · commit 118e46029da1 · 2025-05-27T13:36:29.000-04:00
diff --git a/aspnetcore/blazor/fundamentals/startup.md b/aspnetcore/blazor/fundamentals/startup.md
@@ -607,9 +607,6 @@ The loading indicator used in Blazor WebAssembly apps isn't present in an app cr
 * Showing multiple loading indicators on the same rendered page.
 * Inadvertently discarding prerendered content while the .NET WebAssembly runtime is loading.
 
-<!-- UPDATE 10.0 Will be removed for a new feature in this area. 
-                 Tracked by: https://github.com/dotnet/aspnetcore/issues/49056 -->
-
 A future release of .NET might provide a framework-based loading indicator. In the meantime, you can add a custom loading indicator to a Blazor Web App.
 
 #### Per-component Interactive WebAssembly rendering with prerendering
@@ -625,6 +622,37 @@ To load CSS styles for the indicator, add the styles to `<head>` content with th
 
 `Layout/ContentLoading.razor`:
 
+:::moniker-end
+
+:::moniker range=">= aspnetcore-9.0"
+
+```razor
+@if (!RendererInfo.IsInteractive)
+{
+    <!-- OPTIONAL ...
+    <HeadContent>
+        <style>
+            ...
+        </style>
+    </HeadContent>
+    -->
+    <progress id="loadingIndicator" aria-label="Content loading…"></progress>
+}
+else
+{
+    @ChildContent
+}
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+}
+```
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-8.0 < aspnetcore-9.0"
+
 ```razor
 @if (!OperatingSystem.IsBrowser())
 {
@@ -648,6 +676,16 @@ else
 }
 ```
 
+:::moniker-end
+
+:::moniker range=">= aspnetcore-8.0"
+
+If you didn't already have a `Layout` folder in the `.Client` project, add the namespace for the `Layout` folder to the `_Imports.razor` file. In the following example, the project's namespace is `BlazorSample.Client`:
+
+```razor
+@using BlazorSample.Client.Layout
+```
+
 In a component that adopts Interactive WebAssembly rendering, wrap the component's Razor markup with the `ContentLoading` component. The following example demonstrates the approach with the `Counter` component of an app created from the Blazor Web App project template.
 
 `Pages/Counter.razor`:
@@ -676,10 +714,6 @@ In a component that adopts Interactive WebAssembly rendering, wrap the component
 }
 ```
 
-:::moniker-end
-
-:::moniker range=">= aspnetcore-9.0"
-
 #### Global Interactive WebAssembly rendering with prerendering
 
 *This scenario applies to global Interactive WebAssembly rendering with prerendering (`@rendermode="InteractiveWebAssembly"` on the `HeadOutlet` and `Routes` components in the `App` component).*
@@ -693,6 +727,10 @@ To load CSS styles for the indicator, add the styles to `<head>` content with th
 
 `Layout/ContentLoading.razor`:
 
+:::moniker-end
+
+:::moniker range=">= aspnetcore-9.0"
+
 ```razor
 @if (!RendererInfo.IsInteractive)
 {
@@ -716,6 +754,43 @@ else
 }
 ```
 
+:::moniker-end
+
+:::moniker range=">= aspnetcore-8.0 < aspnetcore-9.0"
+
+```razor
+@if (!OperatingSystem.IsBrowser())
+{
+    <!-- OPTIONAL ...
+    <HeadContent>
+        <style>
+            ...
+        </style>
+    </HeadContent>
+    -->
+    <progress id="loadingIndicator" aria-label="Content loading…"></progress>
+}
+else
+{
+    @ChildContent
+}
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+}
+```
+
+:::moniker-end
+
+:::moniker range=">= aspnetcore-8.0"
+
+If you didn't already have a `Layout` folder in the `.Client` project, add the namespace for the `Layout` folder to the `_Imports.razor` file. In the following example, the project's namespace is `BlazorSample.Client`:
+
+```razor
+@using BlazorSample.Client.Layout
+```
+
 In the `MainLayout` component (`Layout/MainLayout.razor`) of the `.Client` project, wrap the <xref:Microsoft.AspNetCore.Components.LayoutComponentBase.Body%2A> property (`@Body`) with the `ContentLoading` component:
 
 In `Layout/MainLayout.razor`:
@@ -726,10 +801,6 @@ In `Layout/MainLayout.razor`:
 + </ContentLoading>
 ```
 
-:::moniker-end
-
-:::moniker range=">= aspnetcore-8.0"
-
 #### Global Interactive WebAssembly rendering without prerendering
 
 *This scenario applies to global Interactive WebAssembly rendering without prerendering (`@rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)"` on the `HeadOutlet` and `Routes` components in the `App` component).*
