[SalesForce] Lightning : Show Stencil When Component Loads

So I see in the docs for SLDS they talk about using "Stencils" while a page loads. I can't find any examples of how they're implemented. Can anyone point me to any docs or samples that use this?

Best Answer

Stencils abstractly represent what the resulting content layout will look like. Use stencils for full page refreshes, not asynchronous updates. Stencils offer a more visually appealing experience than dozens of spinners animating at the same time or a blank white page.

Stencils looks like below

enter image description here

Use stencils when data takes longer than 300 ms to retrieve. For less than 300 ms, just show the data. If the data takes 301 ms to load, the stencil fades-in promptly and then cross-fades to the data. Do not have a “white flash” between stencils and data.

Table Data Loading Stencil

enter image description here

Record Detail loading Stencil

enter image description here

Now i am surprised that there exists no code shown in the documentation .Here is a rough draft which i tested for spinners and infact same thing will apply for Stencils with necessary HTML markups .Preferably you can use SVG's

I use Spinners when load time is not much and have highlighted approach for spinners which can be tweaked with little effort to have stencils rather spinners .Since the approach is same ,I thought of sharing same so it gives an idea of how to approach

There are various spinners indicated in the SLDS guide

Without Branding

enter image description here

With Branding

enter image description here

Inside your component add markups needed to show spinners

<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>     
<center>
    <div class="slds-spinner--large" aura:id="spinner">
            <img src="/resource/SLDS0121/assets/images/spinners/slds_spinner_brand.gif" alt="Loading..." />
    </div>
 </center>

The javascript controller component to hide or show

({

showSpinner : function (component, event, helper) {
     var toggleText = component.find("spinner");
    $A.util.removeClass(toggleText,'toggle');
},

 hideSpinner : function (component, event, helper) {
   var toggleText = component.find("spinner");
   $A.util.addClass(toggleText,'toggle');
  }
})

You need bit of CSS for styles inside your component

/*toggleCss.css*/
.THIS .toggle {
   display: none;
 }
Related Topic