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
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.
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.
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.
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.
Consume stencil component in LWC
Follow sample code given below to consume or use
stencil component given above:
Consume stencil component in LWC
Follow the sample code given below to consume or use
app (Parent Component)
- Working playground project here.
- Gist resource to download bundle here.
- Learn more about the skeleton structure in this post.
- Checkout SLDS Stencil design guidelines.
- Sample stencil structures
- Learn how to create custom columns in lightning-datatable using LWC.