Loading indicator in UI5 application

During one of our development project, we created a small UI5 application. Due to the need to get a lot of data from external services, the startup time was increasing, resulting in a long wait for users before anything rendered on the screen. Waiting for the application to launch in front of a white screen without any information was feeling as a application failure.

We decided to add some loading indicator that is removed at the rendering stage.

 First step

Add a DIV in the "index.html" file, with  a "loader" class and id.

 

Second Step 

 In the header of the same file, we add some CSS inside a "style" tag. In our case this is coming from css-loaders.com. This css is for the "loader"class that we used previously for the div.

 

 Third step

The last step is to remove this div as soon as the UI5 application is loaded. In the controller for the application, we add (or change) the onBeforeRendering method. in this method, we will get the div by its id, and remove it.

Additional steps

The loading indicator is displayed on the top left part of the page. We can perform some modifications to center it, and add some space to the top.

To do this, we put our div in another one that will act as the container. This external div then take the id "loader" (it's this external  div we will remove via the controller)

 

Then we update the CSS in the header, allowing the new div to act as a centering container

 

Final Result

The final result is a centered "Loading" indicator that disappear when the application is loaded.

 

Resources

I was helped in my antics by the following  sites :

• UI5 Tips: Adding a Splash-Screen / Loading indicator  
• Show Loading indicator while the Ui5 App loads!