Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

SAPUI5 app loading indicator - easy way

former_member211447
Explorer
‎09-24-2015 4:21 PM

How many times did you feel that we need to improve performance of SPUI5 library? While experts are working on it, and of course it is a huge gallery of components which is not easy to manage and will contribute to initial loading times especially if it is not in cache. But the user will really feel that long waiting time only if the screen is blank or unresponsive for that time duration. This is why we place a loading indicator as soon as the page is hit and then let the SAPUI5 library load at peace while the user patiently watches the spinning indicator.

There has been a lot of solutions in various blogs, I am not sure if I am duplicating this one, but I felt this is the easiest one to implement and is provided by SAP - you just need to place your text and animation.

Your script tag looks like below, just include


data-sap-ui-preload="async"


as below.



<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  data-sap-ui-preload="async"

  data-sap-ui-libs="sap.m,sap.ui.comp,sap.suite.ui.commons,sap.ui.layout,sap.ui.commons"

  data-sap-ui-theme="sap_bluecrystal">

 </script>

Your body looks like below - put a div with id as busyIndicator and your animated gif inside it within img tag.



<body class='sapUiBody' id='content'>

  <div id="busyIndicator"><img src="images/spinner.gif"/></div>

</body>

You can search for loading indicator gif and you will find plenty of beautiful free spinners.

That's it! The gif spinner should display the animation till the library loads completely and is ready for rendering.

2 Comments
Labels in this area
Popular Blog Posts