Any 3rd party SLDS Stencil CSS available?

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


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

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.

Tags:

Css

Slds