6

To re-assure users who are waiting for output, the Salesforce Lightning Design system Loading documentation recommends using spinners (included in SLDS - see Spinners) and also Stencils (abstract placeholder lists and panels) that are not included in SLDS.

Based on this thread it looks like there is no timeline for Stencils to be included in SLDS. Is there any 3rd party CSS (doesn't have to be free) that helps simplify creating Stencils?

7

Thanks for sharing this! I'm using your solution but made some changes, so it will look more like the lightning stencils. Just wanted to contribute something back :) Btw. there are still no updates on the Roadmap.

<aura:iteration items=",,,,,,,,," var="unused" indexVar="i">
    <tr style="{# 'opacity: ' + (1 - i / 10)}">
        <td class="stencil"><div /></td>
        <td class="stencil" colspan="{# v.columns.length - 2}"><div /></td>
        <td class="stencil"><div /></td>
    </tr>
</aura:iteration>

CSS

.THIS td.stencil {
    border-left: 1px solid lightgray;
}

.THIS td.stencil div {
    height: 6px;
    margin: 13px auto;
    border-radius: 1rem;
    background: rgb(224, 229, 238);
    width: 75%;
}

It will look something like this (I use it for lazy loading, that's why I added a collspan)

enter image description here

  • 1
    Nice. +1 from me. – Keith C Mar 21 '18 at 16:19
  • Love it! Do you have a ready-made LWC version of these stencils by chance? – Brent Bow Jul 25 '19 at 6:02
  • Thank you, sorry, but I don't :/ But you probably just need to replace the iteration with something like <template for:each={opacities} for:item="opacity" > style="{opacity}" – Basti Jul 25 '19 at 10:48
1

This is what I've done in a page that takes a couple seconds to render its table rows:

CSS:

.THIS .stencil {
    background: #f4f6f9;
    border-radius: 4px;
    height: 30px;
    width: 100%;
}

Component:

<aura:attribute name="opacities" type="Integer[]" default="[1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1]"/>

<tbody>
    <!-- Real data rows -->
    {!v.payments}
    <!-- Stencil rows -->
    <aura:iteration items="{! v.opacities }" var="opacity">
        <tr style="{! 'opacity: ' + opacity }">
            <td><div class="stencil"/></td>
            <td><div class="stencil"/></td>
            <td><div class="stencil"/></td>
         </tr>
    </aura:iteration>
</tbody>

And at the end of the loop that creates the row components the stencil rows are removed using:

component.set("v.opacities", []);

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.