UI5 apps always take a little time to load. If you don't take any precautions, the user will be looking at a blank screen while the app is loading.
It is fairly simple to add a splash screen and loading indicator to improve the user experience. This will give your app a more professional appearance, and it will cost minimal effort.
This post shows you exactly how to do this. You might also be interested in checking out
the sample app from github so you can run it yourself.
Running the app
The loadingscreen sample app is in the
loadingscreen subdirectory of this repository. Simply expose the folder and all its contents with a webserver, and navigate to its index.html
How does it work?
In various tutorials and the
ui5 walkthrough, the
<body> is usually left empty. This is for a good reason - any content that is in the body would simply show up on the page, as is shown in the walkthrough's
"Hello world!" example. But there is an exception: if an element has an
id attribute with the value
busyIndicator, then this content will be hidden after the ui5 bootstrap code is finished and the app content is placed inside the body.
In the loadingscreen sample, the index.html page has a static
<div> element with an
id attribute with the value
busyIndicator as static content in the
<body> element. Indside that
<div> we can place anything we like. In the example, the div contains a header and a footer with static text to indicate that the application is loading. Between the header and the footer is an image of the ui5 logo, and a css animation, which superficially resembles the ui5 busy indicator animation:
<body class="sapUiBody" id="content">
<!-- Loading splash screen -->
<div id="busyIndicator" style="text-align: center; font-family: Sans, Arial">
<!-- static header text -->
<h3>My UI5 App is loading</h3>
<!-- static image of the ui5logo -->
<img src="images/openui5-logo.png" class="logo"/>
<!--
loader animation
CC0 licensed code used with permission from
https://loading.io/css/
-->
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- end of loader animation -->
<!-- static footer text -->
<center><h5>This may take a few moments...</h5></center>
</div>
</body>
The css animation requires some css, and this is included simply as a static css resource by including an appropriate
<link> element in the
<head> of the page:
<head>
<!-- css required for the loading screen css anumation -->
<link id="animation" rel="stylesheet" type="text/css" href="css/progress-animation.css"/>
</head>
In this case, we pulled the css animation from the excellent site
https://loading.io/css/, which provides many different free css animations.
Note that any css required by the loading screen must really be included statically via the
<link> or
<style> element. The standard ui5 mechanism to
include css by declaring it in the manifest.json is no good as it will be loaded as part of the ui5 bootstrap, and the whole idea of the loading screen is to show something
before the ui5 bootstrap even starts.
What does it look like
This is what it looks like when the app is loading:
The text, logo image, and the loader animation are all static content and will show during UI5 bootstrap.
Next Steps
Obviously, this loading screen is only an example to show how you can make it work. The entire design of the loading screen is up to you.
Just remember to keep it light and quick: the whole reason to include a loading screen in the first place was to give the user something to look at while ui5 is bootstrapping. If the loading screen itself requires a lot of resources then it defeats its purpose. For this reason, you might consider including
any css directly using the
<style> element, rather than relying on a network request to load external css with the
<link> element.
Finally
Did you like this tip? Do you have a better tip? Feel free to post a comment and share your approach to the same or similar problem.
Want more tips? Find other posts with the
ui5tips tag!
No comments:
Post a Comment