When the sapui5 core library is loading, the browser can freeze for a short moment. This can cause flickers, hangs and other not so nice side effects.
If the ui5 app is accessed via the web, or if its running on a device with lower cpu power, these negative side effects can be even worse.
You can design your app's index.html in the following way to make the ui5 bootstrap process nicer and smoother.
1. Preload stylesheet
Put a preload stylesheet directly into your app's index.html file's <head> section. This allows your app to apply css before having loaded the ui5 core library.
Alternatively you could put the style directly into a <style></style> section into your <head> to load the css rules even faster.
<!DOCTYPE html><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="stylesheet" type="text/css" href="./app/css/preload.css" /> </head>
The stylesheet contains the css rules that are needed before the ui5 library has been loaded, e.g. to style the splash screen:
html, body{ width:100%; height:100%; padding:0; margin:0; overflow:hidden;
}
#ui5strap-body{ height:100%; position:relative; overflow:hidden;
}
#loader{ position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.9);
}
#loader > img{ width:16px; height:16px; position:absolute; left:50%; top:50%; margin-left:-8px; margin-top:-8px;
}2. Create the main layout
For the main layout of the app, create two containers: one for the app content, one for the loader / splash screen. Put the loader container after the content container:
<body role="application"> <div id="ui5strap-body"> <!-- OpenUI5 will inject the generated html here --> </div> <div id="loader"> <img src="./app/img/loader.gif" width="16" height="16" /> </div>
You can add an animated gif for a spinning loader icon. Please note that animated gifs can stutter when the ui5 library is loaded. Alternatively you can use css animations, and create an infinite spinning animation. Because css animations can be hardware accelerated, they don't stutter so much like gifs.
At this point, the browser already shows the splash screen, which covers the whole screen.
3. Include the ui5 library at the bottom
The loader / splash screen is now already showing and also styled correctly, and now we can include the ui5 core library.
Now it does not matter what happens behind the scenes, its all covered by the splash screen.
<!-- OpenUI5 Library --> <!-- Get it from http://sap.github.io/openui5/ and put it into the directory structure --> <script id="sap-ui-bootstrap" src="resources/sap-ui-core.js" data-sap-ui-xx-fakeOS="ipad"></script>
4. Start your app
Now you can pre-load other important libraries and start your app.
<script id="ui5strap-bootstrap" src="lib/ui5strap/ll.js"></script> <script> libertyLite('./app'); </script> </body></html>Please note that this part totally depends on the structure of the app you are using. The above snippet shows the init process of the Ui5Strap Boilerplate App.
5. Hide the loader / splash screen
Once your app has loaded completely, you can hide the loader / splash screen:
jQuery('#loader').css('display', 'none');Or hide it with the jQuery.hide function to have it animated:
jQuery('#loader').hide();
The result is a nicer and smoother bootstrap process!