DevLifeTech - Stencils Using LWC
Stencils are placeholders that visually communicate that content is in the process of loading. Learn how to create, & use SLDS Stencils in LWC because stencils are the modern spinner.

Key highlights

After reading this article, you’ll be able to:

  • Understand the use of stencils
  • Learn the structure of a basic stencil component
  • Understand how to use stencils in LWC
  • Sample LWC component

Getting Started

Traditional Approach

Traditionally a lightning-spinner LWC base component was used to display an animated spinner image to indicate that a feature is being loaded. This component can be used when retrieving data or anytime an operation doesn’t immediately complete. This component inherits styling from spinners in the Lightning Design System (SLDS). lightning-spinner is being in practice nowadays too because there is no alternative ready-made, easy to consume, and effort-free options available.

Source: SLDS Spinner

Modern Approach

Loading indicators help to reassure the user that the system is actively retrieving data or loading structure. Stencils are skeleton loader that visually communicates that content is in the process of loading. As per Luke Wroblewski (Who first coined the term “skeleton screen”), A stencil is essentially a blank version of a page/block/component into which information is gradually loaded. Stencils offer a more visually appealing experience than dozens of spinners animating at the same time or a blank white page.

SLDS Spinner

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. Try to minimize the “white flash” between stencils and data because it disconnects transition. Keep stencils simple and lightweight by using simple & subtle shapes to indicate component structure. It should not include button placements or other minor details.

SLDS Stencils

Stencils should be responsive and stretch to fill the container that they are in.

Source: SLDS Loading Design Guidelines

Basic LWC Stencil Structure

Stencil structure is a blank canvas that is progressively populated with content, such as text, list, and images, as they become available (i.e. when record data is fetched from server). Grey filled shapes, commonly called placeholders, meet the user instantly upon user interaction with calls to action or links. The placeholders (the so-called “bones” of the stencil) are then replaced with the actual record data, and the illusion is complete. That’s what stencil structure does: create the illusion of an instant transition. Check out this article by Bill Chung if you want to know everything about skeleton screens aka stencils.

Create Stencil using SLDS and LWC

Since stencils are very specific to the component design structure. SLDS nor salesforce component library doesn’t provide generic components supporting stencil design. So we have created a sample stencil component using SLDS classes and basic CSS to work with the lightning web component. There are some common approaches to design stencil:

  • Static placeholders
  • Faded placeholders (Reduce the opacity of each row to create a fade effect)
  • Animation overlaid placeholders (shimmer or waving animation from left to right overlapping placeholder)

We have followed the “animation overlaid placeholders” approach to create a sample stencil component. The sample code contains two types of templates, One for simple text or list type of skeleton (stencilListType) and another for feed type of skeleton structure (stencilFeedType). The output demonstrates both types of stencils. Either copy as needed code from below or download component bundle from the button below.

stencil.html

Consume stencil component in LWC

Follow the sample code given below to consume or use stencil component:

app (Parent Component)

Component Preview

DevLifeTech - Stencil LWC Output
Stencil LWC Preview

Resources