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: 

Show Loading indicator while the Ui5 App loads!

sajid-khan
Explorer
2 weeks ago

Hi everyone,

I'd like to discuss an approach I had been able to use to improve user experience during initial App Load in our complex standalone UI5 application.

The initial load time of our complex Ui5 Application was longer than ideal due to the need to fetch numerous components and libraries during startup. This resulted in a long wait for users before anything rendered on the screen.

Furthermore, the browser's loading indicator stops while these resources are fetched in the background. This proved to be misleading for users, as users reported that the blank screen that followed looked like a failed application launch. (screenshot below)

sajid5ts_3-1713986571033.png

To address this, I've implemented an initial loading indicator within the app. This indicator appears as soon as the index.html file loads, providing immediate visual confirmation that the app is starting up in the background.

sajid5ts_4-1713986904815.png

I'd like to share the code behind this simple approach, which I believe could be a helpful workaround for anyone facing a similar issue with long initial load times in their standalone UI5 application. The code utilizes CSS and requires only a few lines to implement. Here's a step-by-step guide:

Step 1
Add a class named "loading" to the body tag of the index.html file.

sajid5ts_7-1713987348348.png

 

Step 2
Include the following CSS code within a <style> tag placed inside the <head> section of index.html file.

 

body.loading::before {
    content: "Loading...";
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    align-items: center;
    justify-content: center;
    background: white;
    color:darkslategray;
}

/* Following CSS is for dark theme.
 * Replace theme name (sap_horizon_dark, sap_horizon_hcb)
 * with your application's dark theme name repectivly
*/
.sapUiTheme-sap_horizon_dark body.loading::before,
.sapUiTheme-sap_horizon_hcb body.loading::before
{
    background: darkslategray;
    color: white;
}

 

sajid5ts_0-1713989656867.png

Important Note:
While UI5 offers the option to include custom CSS files through manifest.json, a more effective approach for this specific scenario is to directly embed the CSS code within a <style> tag placed inside the <head> section of index.html file. This ensures that the CSS styles are applied as soon as the index.html file is loaded. If we were to use a separate CSS file managed by manifest.json, there's a possibility that the styles might not be loaded until UI5 components are fully ready, which would defeat the purpose of providing immediate visual feedback during the initial application load.

Step 3
Adding above CSS as well as "loading" class to the body will result in "Loading..." text to appear in the middle of the blank page. The final step is to make sure that this "Loading..." text is hidden as soon as loading of Ui5 app is finished.

To achieve this, add the following JavaScript code to the onBeforeRendering method of the root view controller.

 

document.body.classList.remove('loading');

 

sajid5ts_9-1713987902521.png

The above code removes the "loading" class from the body element, which in turn hides the "Loading..." text appearing in the middle of the blank page. As an alternative, you can add above JavaScript code to the onBeforeRendering method of UIComponent as well.

And that's it! Following these 3 simple steps should result in a "Loading..." text to appear during initial loading stage of the app.

I hope this guide was informative! Feel free to leave any comments or suggestions for improvement.

Thank you 🙂

Sajid Khan

 

 

Labels in this area
Popular Blog Posts