Skip to content

Commit 7fc9d8d

Browse files
guardrexguardrex
committed
Updates
1 parent 768425e commit 7fc9d8d

File tree

2 files changed

+80
-80
lines changed

2 files changed

+80
-80
lines changed

‎aspnetcore/blazor/components/lifecycle.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -828,6 +828,81 @@ In the following example:
828828

829829
:::moniker-end
830830

831+
To display a loading indicator while the background work is taking place, use the following approach.
832+
833+
Create a loading indicator component with a `Loading` parameter that can display child content in a <xref:Microsoft.AspNetCore.Components.RenderFragment>. For the `Loading` parameter:
834+
835+
* When `true`, display a loading indicator.
836+
* When `false`, render the component's content (`ChildContent`). For more information, see [Child content render fragments](xref:blazor/components/index#child-content-render-fragments).
837+
838+
`ContentLoading.razor`:
839+
840+
```razor
841+
@if (Loading)
842+
{
843+
<div aria-busy="true" aria-describedby="progress-bar"></div>
844+
<progress id="progress-bar" aria-label="Content loading…"></progress>
845+
}
846+
else
847+
{
848+
@ChildContent
849+
}
850+
851+
@code {
852+
[Parameter]
853+
public RenderFragment? ChildContent { get; set; }
854+
855+
[Parameter]
856+
public bool Loading { get; set; }
857+
}
858+
```
859+
860+
:::moniker range=">= aspnetcore-6.0"
861+
862+
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>.
863+
864+
```razor
865+
@if (Loading)
866+
{
867+
<HeadContent>
868+
<style>
869+
...
870+
</style>
871+
</HeadContent>
872+
873+
<div aria-busy="true" aria-describedby="progress-bar"></div>
874+
<progress id="progress-bar" aria-label="Content loading…"></progress>
875+
}
876+
else
877+
{
878+
@ChildContent
879+
}
880+
881+
...
882+
```
883+
884+
:::moniker-end
885+
886+
Wrap the component's Razor markup with the `ContentLoading` component and pass a value in a C# field to the `Loading` parameter when initialization work is performed by the component:
887+
888+
```razor
889+
<ContentLoading Loading="@loading">
890+
...
891+
</ContentLoading>
892+
893+
@code {
894+
private bool loading = true;
895+
...
896+
897+
protected override async Task OnInitializedAsync()
898+
{
899+
await LongRunningWork().ContinueWith(_ => loading = false);
900+
}
901+
902+
...
903+
}
904+
```
905+
831906
## Blazor Server reconnection events
832907

833908
The component lifecycle events covered in this article operate separately from [server-side reconnection event handlers](xref:blazor/fundamentals/signalr#reflect-the-server-side-connection-state-in-the-ui). When the SignalR connection to the client is lost, only UI updates are interrupted. UI updates are resumed when the connection is re-established. For more information on circuit handler events and configuration, see <xref:blazor/fundamentals/signalr>.

‎aspnetcore/blazor/fundamentals/startup.md‎

Lines changed: 5 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -700,88 +700,13 @@ In `Layout/MainLayout.razor`:
700700

701701
*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).*
702702

703-
Create a `ContentLoading` component in the `Layout` folder of the `.Client` app with a `Loading` parameter:
703+
XXXXXXXXXXXXXXXXXXX
704704

705-
* When `true`, display a loading progress indicator.
706-
* When `false`, render the requested component's content.
705+
Awaiting further guidance from Javier to confirm that
706+
a JS initiazlier or `Blazor.start()` approach is the
707+
correct pattern for this.
707708

708-
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>.
709-
710-
`Layout/ContentLoading.razor`:
711-
712-
```razor
713-
@if (Loading)
714-
{
715-
<!-- OPTIONAL ...
716-
<HeadContent>
717-
<style>
718-
...
719-
</style>
720-
</HeadContent>
721-
-->
722-
<div aria-busy="true" aria-describedby="progress-bar"></div>
723-
<progress id="progress-bar" aria-label="Content loading…"></progress>
724-
}
725-
else
726-
{
727-
@ChildContent
728-
}
729-
730-
@code {
731-
[Parameter]
732-
public RenderFragment? ChildContent { get; set; }
733-
734-
[Parameter]
735-
public bool Loading { get; set; }
736-
}
737-
```
738-
739-
In a component that adopts Interactive WebAssembly rendering without prerendering, wrap the component's Razor markup with the `ContentLoading` component and pass a value in a C# field to the `Loading` parameter when initialization work is performed by the component. The following example demonstrates the approach with the `Home` component of an app created from the Blazor Web App project template.
740-
741-
`Pages/Home.razor`:
742-
743-
```diff
744-
@page "/"
745-
746-
<PageTitle>Home</PageTitle>
747-
748-
<ContentLoading Loading="@loading">
749-
<h1>Hello, world!</h1>
750-
<p>Welcome to your new app.</p>
751-
</ContentLoading>
752-
753-
@code {
754-
private bool loading = true;
755-
756-
protected override async Task OnInitializedAsync()
757-
{
758-
// Simulate long-running work
759-
await Task.Delay(5000);
760-
761-
loading = false;
762-
}
763-
}
764-
```
765-
766-
This approach also works with the [cancelable background work pattern](xref:blazor/components/lifecycle#cancelable-background-work):
767-
768-
```razor
769-
<ContentLoading Loading="@loading">
770-
...
771-
</ContentLoading>
772-
773-
@code {
774-
private bool loading = true;
775-
...
776-
777-
protected override async Task OnInitializedAsync()
778-
{
779-
await LongRunningWork().ContinueWith(_ => loading = false);
780-
}
781-
782-
...
783-
}
784-
```
709+
XXXXXXXXXXXXXXXXXXX
785710

786711
### Blazor WebAssembly app loading progress
787712

0 commit comments

Comments
 (0)