OsirionPageLoading

OsirionPageLoading renders a centered spinner with an optional line of text. Show it while a page or section waits for data: during streaming rendering in static SSR, or while an interactive component loads.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub.

@using Osirion.Blazor.Components

@* The component is at least half a viewport high; the demo shrinks it to fit the page *@
<style>
    .page-loading-demo div.osirion-loading {
        min-height: 0;
        margin: 0 auto;
    }
</style>

<div class="page-loading-demo" role="status" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem;">
    <OsirionPageLoading />
    <OsirionPageLoading Text="Loading articles..." />
</div>

The component is at least half a viewport high (min-height: 50vh). The demo shrinks it with a rule in its own stylesheet so it fits on this page.

Usage

@using Osirion.Blazor.Components

<OsirionPageLoading />

A realistic case is a streamed page that loads content asynchronously:

@page "/articles"
@attribute [StreamRendering]
@using Osirion.Blazor.Components

@if (articles is null)
{
    <OsirionPageLoading Text="Loading articles..." />
}
else
{
    <ul>
        @foreach (var title in articles)
        {
            <li>@title</li>
        }
    </ul>
}

@code {
    private string[]? articles;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(500); // stands in for your data call
        articles = ["Getting started", "Theming"];
    }
}

With [StreamRendering] the server sends the spinner first and replaces it with the list when the data arrives, without any script of yours. The CMS components (ArticlePage, DocumentPage, HomePage and the content list section) use it the same way while they load content.

Parameters

The component does not apply Class, Style, Theme or unmatched attributes to its markup; wrap it in your own element to position or restyle it.

Behavior

• Rendering. The spinner is a CSS animation, so it works under static SSR, streaming rendering and interactive rendering alike.
• Motion. The spinner turns continuously, and stops under prefers-reduced-motion: reduce, leaving a still ring.
• Accessibility. The text is a plain paragraph; the component sets no role="status" or live region. If screen reader users should hear that content is loading, wrap it in an element with role="status" yourself:

<div role="status">
    <OsirionPageLoading Text="Loading articles..." />
</div>

Styling

The spinner's moving edge uses --osirion-action-primary, the text uses --osirion-text-secondary and the container background uses --osirion-background-primary, so the CSS framework adapters recolor it. The styles are scoped to the component, which adds an attribute selector to each rule (one class plus one attribute), so override them from a global stylesheet with a more specific selector, such as .my-wrapper div.osirion-loading.

Related

• OsirionContentNotFound
• OsirionPageLayout
• Layout overview