Override default loading message in Salesforce lightning application using template

While developing Lightning component, all of us might have been noticed that default user interface for loading component looks like below image.

Default loading screen in Salesforce lightning
Default loading screen in Salesforce lightning

Most of us, for sure will want to customize this loading message to match their Salesforce implementation theme. We can use “Lightning Template” to override this message to show something like below image.

Customized default loading message in Salesforce lightning
Customized default loading message in Salesforce lightning

Using “Lightning Template”, we can change default message, image or even background color.

First we need to create a Lightning component which extends “aura:template” and attribute “isTemplate” is marked as true. We can add custom text as well by introducing attribute “loadingText” in component. With help of some CSS, we can achieve any look and feel. To add any image on default loading screen, we need to add it as “Base64” encoded format. There are tons of utilities available on web to convert image into base64 format.

CustomTemplate.cmp

<aura:component isTemplate="true" access="GLOBAL" extends="aura:template">
	<aura:set attribute="title" value="Customized Loading Message"/>
	<aura:set attribute="loadingText" value="Loading..."/>

<style>
    body {
        background-color: #ffffff;
    }

    .auraMsgBox {
        background-color: #ffffff;
        min-width: 400px;
        min-height: 160px;
        border: none;
        box-shadow: none;
    }

    .auraMsgBox .logo {
        /* replace below base64 by actual image code */
        background-image: url( 'data:image/png;base64, iVBORw0K......CYII=');
        background-repeat: no-repeat;
        background-position: center center;
        height: 405px;
        width: 400px;
    }

    .auraMsgBox h2 {
        color: #000000;
    }
</style>
   
</aura:component>

Note : Only copy paste of above code will not work, we need to replace base64 by actual image code. To make code simpler, I have trimmed it in CSS. We can use this website to convert any image to base64 encoded format.

As we can see in above code, “auraMsgBox” class needs to be modified to add any custom style.

Second and final step is to use this template in our lightning component.

Example of Lightning app using template :

<aura:application template="c:customTemplate">
      <c:CustomComponent /> 
</aura:application>

Related posts

2 thoughts on “Override default loading message in Salesforce lightning application using template”

  1. Hey, I am able to achieve the desired response but facing one problem.
    It first displays the loading image and then replaces it with the customised image. Why so?
    Thanks

  2. Hi,

    I have done all the modifications of the code, but when requesting a preview it gives a blank page.

    Would you know what might be the reason?

    Regards,

    Matt

Leave a Reply

Your email address will not be published. Required fields are marked *