12

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?

8

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;
 }
  • Thanks @Mohith. Spinners seem like they're great for an individual component loading/rerendering within a page. For stencils, I'm wondering if there are any "out of the box" stencils? I like the look of the ones they're using in the examples, however I can't find where to get them as resources. Do we have to create our own stencil images for use? The docs make it sound like there are some ready-made ones out there. – Jason Benkert Feb 23 '16 at 13:50
  • SLDS link in my answer takes you to SVG .Use those and depending on layout you can create one yourself as well or your designer can create you One – Mohith Shrivastava Feb 23 '16 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.