Skip to Content

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!

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Daniel Krahnke

    Hello Jan,

    great post! Can you give me an example for the css animation for the pure css spinner that you mentioned? I have difficulties to get it up and running.

    Kind Regards,

    Daniel

    (0) 
    1. Jan Philipp Knoeller Post author

      Hello Daniel,

      1. you have to define a spinning animation in your css file:

      @-moz-keyframes spin {

          from { -moz-transform: rotate(0deg); }

          to { -moz-transform: rotate(360deg); }

      }

      @-webkit-keyframes spin {

          from { -webkit-transform: rotate(0deg); }

          to { -webkit-transform: rotate(360deg); }

      }

      @keyframes spin {

          from {transform:rotate(0deg);}

          to {transform:rotate(360deg);}

      }

      You need these three classes for the different browsers.

      2. You need to define a spinner in you css file

      You can use any image as a spinner, but i would use a png file with alpha to create a nice effect:

      .spinner{

           background-image:url(‘spinner-black.png’);

           background-position: center center;

           background-repeat: no-repeat;

           background-size:cover;

           width:32px;

           height:32px;

          

           -webkit-animation: spin 2s infinite linear;

           -moz-animation: spin 2s infinite linear;

           -o-animation: spin 2s infinite linear;

           animation: spin 2s infinite linear;

           -webkit-transform: translate3d(0,0,0);

             -moz-transform: translate3d(0,0,0);

             -ms-transform: translate3d(0,0,0);

             -o-transform: translate3d(0,0,0);

             transform: translate3d(0,0,0);

      }


      The first block is to style the spinner’s appearance, the second block is to assign the previously defined spinning animation. The last block is to force hardware acceleration.


      3. Add the spinner to your markup


      <div class=”spinner”></div>


      This can be done by a ui5 control or directly into the index.html file.


      I hope this helped.


      Please note that css animations do not work on older browsers, like our all friend IE < 11


      Kind regards,

      Jan

      (0) 

Leave a Reply