Lightning : Show Stencil When Component Loads

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

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

Record Detail loading Stencil

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

With Branding

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;
 }