Blazor Web Assembly Loading Screen
Ich zeige wie man den Blazor Web Assembly Loading Screen customizieren kann. Ein schöner Ladebildschirm ist ein wesentlicher Bestandteil einer jeden Web Assembly Applikation. In den Sekunden ohne Interaktion ist die Gefahr am größten, dass der User die Session abbricht und Alternativen sucht.
Blazor Web Assembly Loading Screen
Eine Blazor Web Assembly Applikation hat gegenüber der Server-Variante viele Vorteile. Ein gravierender Nachteil ist die höhere initiale Ladezeit. Beim erstmaligen Starten der App muss diese vom Server abgerufen und auf den Client heruntergeladen werden. Je nach größe und aktueller Internetverbindung kann das mehrere Sekunden bis Minuten dauern. Bei einem, über den Assistente von Visual Studio erstellten, Projekt sieht das wie folgt aus:
Zur Entwicklungszeit ist diese leere Seite mit dem Infotext „Loading…“ gerade noch hinzunehmen. Sobald man die App produktiv setzt muss da ein schöner und informativer Ladescreen hinein. Wie geht das?
Anpassungen
Der Startpunkt einer Web-Applikation ist üblicherweise die index.html Seite. Auch Blazor Web Assembly ist davon kei.ne Ausnahme. Im wwwroot Folder im Projekt findex man dort gleich in der ersten Zeile nach dem body Tag ein div mit der id app. Dort steht der angezeigte Text „Loading…“.
Im einfachsten Fall sollte der Text auf der Seite gut sichtbar zentriert dargestellt werden. In der Regel sollte bei Ladeanzeigen das Wort „Loading“ vorkommen. Ebenso ist ein sich bewegender Spinner nicht schlecht, damit der Benutzer zumindest irgend eine Reaktion sehen kann. In meinem Fall schreibe ich auch noch den Title dazu, was eigentlich da geladen wird…
Wenn man sich den Inhalt vom body Tag genauer ansieht wird auch klar was genau passiert. Der statische Text wird ausgegeben und vom Browser gerendert. Gleichzeitig lädt dieser die blazor.webassembly.js Datei, diese lädt das Web Assembly und startet dessen Ausführung. Je nach größe der Assembly dauert das. D.h. je länger nichts anderes gerendert wird bleibt der statische Text stehen. Die Änderung sieht nun wie folgt aus:
Immer noch verbesserungswürdig, aber die erste Individualisierung der Ladeseite wurde gemacht. Für den Entwickler endet die Arbeit hier, der Designer kann nun mit CSS und JS die Seite noch nach dem UI Design aufhübschen. Im besten Fall bekommt der Benutzer dort schon einen Vorgeschmack auf was er sich bei der Applikation freuen darf.
Fazit
Ein paar Zeilen HTML Code und einige CSS Stylings beziehungsweise JS Animationen und der Benutzer bleibt interessiert während die Blazor Web Assembly Applikation lädt. Die Ladezeit ist die einzige Schwachstelle von Web Assembly und mit einer cleveren Ladeseite kann man diesen Nachteil sogar noch in ein Feature umwandeln.
