LoadingSpinner

Der LoadingSpinnerBuilder (Fmh.LoadingSpinner()) rendert ein blockierendes Lade-Overlay mit FMH-Signet und Statustext. Es ist zunächst verborgen; ein- und ausgeblendet wird es über die Skript-Funktionen showLoader(text) und hideLoader().

Lade-Overlay ein- und ausblenden

Der Builder rendert das Overlay verborgen; sichtbar machen es die Skript-Funktionen showLoader()/hideLoader() – siehe Tab „JavaScript“.

@* Der Builder rendert das Overlay verborgen (CSS: display none). Sichtbar machen es die globalen
   Skript-Funktionen showLoader(text) und hideLoader() aus fmh.js. Der Knopf dieser Demo blendet es
   zwei Sekunden lang ein; die Umsetzung steht im Tab "JavaScript". *@

@Html.Fmh(Fmh.LoadingSpinner("Daten werden geladen …"))

<button type="button" class="btn btn-sm btn-outline-secondary" data-spinner-demo>
    Overlay 2 Sekunden zeigen
</button>
<p class="small text-muted mt-2 mb-0">Das Overlay deckt die Seite vollständig ab und sperrt das
    Scrollen – gedacht für Wartezeiten, in denen keine Eingabe möglich sein soll.</p>

<script src="~/js/demos/loading-spinner.js" asp-append-version="true"></script>

// Demo "Basis › Ui › Feedback › LoadingSpinner": Overlay ein- und wieder ausblenden.
//
// showLoader(text) und hideLoader() sind globale Funktionen aus fmh.js der Basis-Komponente.
// showLoader() setzt das Overlay auf die aktuelle Scroll-Position, blendet es ein und sperrt das
// Scrollen; hideLoader() macht beides rückgängig.
//
// In einer echten Anwendung steht hideLoader() dort, wo die Wartezeit endet – auch im Fehlerfall,
// sonst bleibt die Seite gesperrt. Hier übernimmt das ein Timeout.
document.addEventListener('click', function (event) {
    var knopf = event.target.closest('[data-spinner-demo]');
    if (knopf === null) {
        return;
    }

    showLoader('Daten werden geladen …');
    window.setTimeout(hideLoader, 2000);
});

// jQuery-Variante zum Beispiel «Lade-Overlay ein- und ausblenden» – dasselbe wie im Tab
// "JavaScript", nur mit jQuery geschrieben. Diese Datei wird von der Demo-Seite NICHT geladen;
// sonst liefe der Klick-Handler doppelt. Sie ist als Vorlage zum Übernehmen gedacht.
$(function () {
    // Delegierter Klick: wirkt auch für Knöpfe, die erst später ins DOM kommen (nachgeladene Inhalte).
    $(document).on('click', '[data-spinner-demo]', function () {
        showLoader('Daten werden geladen …');

        // In einer echten Anwendung steht hideLoader() im done()/fail() des Ajax-Aufrufs –
        // auch im Fehlerfall, sonst bleibt die Seite gesperrt:
        //
        // $.getJSON('/Antrag/Pruefen')
        //     .always(function () { hideLoader(); });
        window.setTimeout(hideLoader, 2000);
    });
});

Darstellung

Daten werden geladen …

Das Overlay deckt die Seite vollständig ab und sperrt das Scrollen – gedacht für Wartezeiten, in denen keine Eingabe möglich sein soll.

Der LoadingSpinnerBuilder wird über Fmh.LoadingSpinner() bzw. Fmh.LoadingSpinner(text) erzeugt und mit @Html.Fmh(...) gerendert. Er legt ein verborgenes Overlay mit FMH-Signet und Statustext in die Seite — üblicherweise einmalig im Layout:

@Html.Fmh(Fmh.LoadingSpinner("Daten werden geladen …"))

Ohne Angabe steht der Standardtext aus den Ressourcen (_FmhWebMvc.Spinner_StatusText).

Methoden

Methode	Erklärung
`Fmh.LoadingSpinner(text)`	Kurzform für `Fmh.LoadingSpinner().StatusText(text)`.
`.StatusText(string)`	Der Text unter dem Signet.

Ein- und Ausblenden

Der Builder selbst zeigt nichts an — das Overlay ist per CSS display: none. Sichtbar machen es zwei globale Funktionen aus fmh.js:

showLoader('Antrag wird geprüft …');   // einblenden, Statustext optional überschreiben
hideLoader();                          // ausblenden

showLoader(text) setzt das Overlay auf die aktuelle Scroll-Position, blendet es ein und sperrt das Scrollen des Body (overflow: hidden); hideLoader() macht beides rückgängig. Ohne Argument bleibt der beim Rendern gesetzte Statustext stehen.

Der Code-Tab JavaScript am Beispiel zeigt die Umsetzung, der Tab jQuery dieselbe mit jQuery (inklusive always() als Ort für hideLoader()). Die Dateien liegen unter wwwroot/js/demos/; geladen wird nur die JavaScript-Fassung.

Was zu beachten ist

Das Overlay ist blockierend: Es deckt die Seite vollständig ab (weisser Hintergrund, z-index: 10000) und verhindert Eingaben. Gedacht für Wartezeiten, in denen nichts anderes passieren soll — nicht als Ladeanzeige für einen einzelnen Bereich.
Jedem showLoader() muss ein hideLoader() folgen, auch im Fehlerfall. Bleibt der Aufruf im error-Zweig eines Ajax-Calls aus, ist die Seite gesperrt und der Benutzer muss neu laden.
Die Funktionen sprechen .fmh-loading-overlay an — also alle Overlays der Seite. Der Baustein gehört deshalb genau einmal ins Layout, nicht mehrfach pro View.
Bei einem gewöhnlichen Seitenwechsel braucht es den Spinner nicht; sein Platz ist bei Ajax-Aufrufen und langlaufenden Aktionen ohne Seitenwechsel.