LWC Skeleton Loader

A reusable Skeleton / Stencil Loader component for Salesforce Lightning Web Components (LWC), built following Salesforce Lightning Design System (SLDS) loading guidelines.

Traditional Spinner

Better UX

Card Skeleton

Table Skeleton

Why Use Skeleton Loaders?

Instead of showing a spinner (lightning-spinner), skeleton loaders provide a superior user experience with better UI/UX:

🎯

Better Than Spinners

Shows actual content structure instead of a generic loading icon. Gives users a preview of what's coming and reduces loading anxiety.

📐

Preserve Layout Structure

Maintains the exact layout of your final content, preventing jarring layout shifts. Creates a smoother, more professional experience.

⚡

Improve Perceived Performance

Users perceive skeleton loaders as faster because they see content structure immediately. Makes your app feel more responsive and modern.

✨

Better UX Patterns

Follows modern UX best practices used by leading platforms. Creates a more polished, enterprise-grade user experience.

Installation

Option 1 — Manual Installation

1. Clone the repository

git clone https://github.com/gouravbhardwaj/lwc-skeleton.git

2. Copy the lwc-skeleton folder into

force-app/main/default/lwc/

3. Deploy to your org

sfdx force:source:deploy -p force-app

Usage

Use the component with conditional rendering in your parent component:

<template if:true={isLoading}>
    <c-lwc-skeleton type="text" lines="4" ></c-lwc-skeleton>
    <c-lwc-skeleton type="small-text" lines="2" ></c-lwc-skeleton>
    <c-lwc-skeleton type="avatar" ></c-lwc-skeleton>
    <c-lwc-skeleton type="card" ></c-lwc-skeleton>
    <c-lwc-skeleton type="table" rows="6" columns="4" ></c-lwc-skeleton>
    <c-lwc-skeleton type="rectangle" width="100%" height="200px" ></c-lwc-skeleton>
</template>

Component API

Property	Type	Default	Description
type	String	text	text, small-text, avatar, card, table, rectangle
lines	Number	3	Number of text lines
rows	Number	5	Number of table rows
columns	Number	3	Number of table columns
width	String	100%	Width (for rectangle type)
height	String	150px	Height (for rectangle type)

Skeleton Types

Explore different skeleton loader types with usage examples

Text Loader

Perfect for displaying loading states for text content like descriptions, paragraphs, or multi-line text blocks. Use this in record detail pages, article views, or any component that displays textual information.

<c-lwc-skeleton type="text" lines="4" ></c-lwc-skeleton>

Small Text Loader

Ideal for smaller text elements such as labels, captions, metadata, or short descriptions. Great for compact layouts, list items, or card footers where space is limited.

<c-lwc-skeleton type="small-text" lines="2" ></c-lwc-skeleton>

Avatar Loader

Use this when loading user profile pictures, contact images, or any circular image placeholders. Perfect for user lists, contact cards, or profile sections in Lightning components.

<c-lwc-skeleton type="avatar" ></c-lwc-skeleton>

Card Loader

Excellent for dashboard cards, product cards, or any card-based layouts. Use this when loading complex card components with images, text, and action buttons. Ideal for home pages and app pages with card grids.

<c-lwc-skeleton type="card" ></c-lwc-skeleton>

Table Loader

Perfect for data tables, list views, or tabular data displays. Use this when loading record lists, reports, or any structured data in table format. Great for maintaining table layout during data fetching.

<c-lwc-skeleton type="table" rows="6" columns="4" ></c-lwc-skeleton>

Rectangle Loader

Flexible loader for custom layouts, images, charts, or any rectangular content area. Use this for custom components, image galleries, or when you need a specific-sized placeholder that matches your content dimensions.

<c-lwc-skeleton type="rectangle" width="100%" height="200px" ></c-lwc-skeleton>

Some Sample Use Cases

Some are some sample loader created for different screens of Salesforce UI. Experiment and try out these out.

1️⃣

Object details page loader

Scenario: You're loading Account details with Header, Related Contacts table, and Activity summary card.

Implementation Code:

<div>

            <!-- ===== RECORD HEADER ===== -->
            <div class="slds-p-around_medium">

✨ UX Result:

Avatar placeholder for Account logo, text lines for Account Name + Industry, card layout for KPIs, and table skeleton for Contacts. Feels like Salesforce native Lightning UI.

2️⃣

Object list view loader

Scenario: Loading KPI metrics, summary card, and stage history table.

Implementation Code:

<div>

            <!-- Page Header -->
            <div class="slds-p-around_medium">
                <div class="slds-grid slds-align-center slds-m-bottom_medium">

✨ UX Result:

Full dashboard structure appears instantly. No spinner blocking the entire view.

3️⃣

User Profile Loader

Scenario: Loading user profile sidebar with avatar, name, details, and activity feed.

Implementation Code:

<div class="slds-p-around_medium">
            <!-- Page Header -->
            <div >
                <div class="slds-grid slds-align-center slds-m-bottom_medium">
                    <c-lwc-skeleton type="avatar"></c-lwc-skeleton>

✨ UX Result:

Looks like LinkedIn-style professional UI loading.

Frequently Asked Questions

Common questions about skeleton loaders, stencil loaders, and GIF loaders in LWC

A skeleton loader in LWC (Lightning Web Components) is a loading placeholder that mimics the structure of the content that will be displayed. Instead of showing a spinner, skeleton loaders show animated placeholders that match the layout of your actual content, providing better perceived performance and reducing layout shifts.