Any 3rd party SLDS Stencil CSS available?

Question

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?

Answer 1

No standard component available as of now, but this article might be helpful. It contains sample repo which leads to working custom stencil component. It uses LWC for the structure.

https://devlife.tech/index.php/2020/06/22/how-to-use-stencils-in-lightning-web-component

Let us know if it helps.

Answer 2

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)

Answer 3

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", []);

Answer 4

I have worked with stencil without any 3rd party CSS stencils in LWC / Aura component.

I hope it works - for my project it's working fine in LWC and Aura.

So here is the code. HTML:

<div class"demo"> <div/>

CSS:

.demo:empty {
    margin: auto;
        width: 500px;
        height: 600px; /* change height to see repeat-y behavior */
    
        background-image:
            radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),
            linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
            linear-gradient( lightgray 20px, transparent 0 ),
            linear-gradient( lightgray 20px, transparent 0 ),
            linear-gradient( lightgray 20px, transparent 0 ),
            linear-gradient( lightgray 20px, transparent 0 );

        background-repeat: repeat-y;

        background-size:
            100px 200px, /* circle */
            50px 200px, /* highlight */
            150px 200px,
            350px 200px,
            300px 200px,
            250px 200px;

        background-position:
            0 0, /* circle */
            0 0, /* highlight */
            120px 0,
            120px 40px,
            120px 80px,
            120px 120px;

        animation: shine 1s infinite;
    }

    @keyframes shine {
        to {
            background-position:
                0 0,
                100% 0, /* move highlight to right */
                120px 0,
                120px 40px,
                120px 80px,
                120px 120px;
        }
    }