SAPUI5 app loading indicator – easy way
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
<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.