https://github.com/cesarparra/lightning-stencil
Make your components feel faster by using building stencil (skeleton) that closely match your component's final output
https://github.com/cesarparra/lightning-stencil
lightning lwc salesforce skeleton stencil
Last synced: about 1 year ago
JSON representation
Make your components feel faster by using building stencil (skeleton) that closely match your component's final output
- Host: GitHub
- URL: https://github.com/cesarparra/lightning-stencil
- Owner: cesarParra
- License: mit
- Created: 2020-02-09T20:53:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-18T11:05:42.000Z (almost 2 years ago)
- Last Synced: 2025-03-14T17:03:37.717Z (about 1 year ago)
- Topics: lightning, lwc, salesforce, skeleton, stencil
- Language: JavaScript
- Homepage:
- Size: 1.46 MB
- Stars: 38
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lightning Stencil
Lightning Stencil to provide a skeleton of your lightning web components while they are loading. Stencils help
provide a sense of faster loading times by giving your users an immediate sense of the layout that will be loaded.
Built following the [Salesforce Lightning Design System Loading specification for stencils.](https://www.lightningdesignsystem.com/guidelines/loading/)
## Basic Usage
Deploy the `stencil` web component and reference it in the component you want to use it.
```html
```
## Height
To specify a height use the `height` property and pass in a value in pixes.
```html
```
## Width
To specify a width use the `width` property and pass in a value in pixes.
```html
```
## Color variants
Stencils come in 3 different variants, `light`, `medium`, and `dark`.
Use the `weight-variant` property to specify the desired color variant.
```html
```
## Circles
To create stencils in the shape of a circle, which can be used when creating a user card with a profile picture, for instance
use the `circle` property:
```html
```
## Multi-Line Stencils
To simulate a paragraph block use the `count` property to output multiple stencil lines
with a single component:
```html
```
## Example - User profile card
By taking advantage of [LWC's conditional rendering](https://developer.salesforce.com/docs/component-library/documentation/lwc/create_conditional) capabilities we can build entire stencil
components that are displayed to the user until your component's contents load and are ready
to be displayed to the user.
Let's take a user profile component called that has the following markup in the `userProfile.html` template:
```html
John Smith
CEO
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
```
To build a stencil (skeleton) for our component we can:
* Build an alternative HTML template that uses the exact same layout as the
main component, but we substitute the places where we display data for `stencil` references.
Let's call it `userProfileStencil.html` and place it in the same directory as the main component.
```html
```
* Reference the stencil template while your component loads
Import both templates and use the `render` method to decide when the stencil
should load or when your component is ready to render.
```javascript
import { LightningElement, track } from 'lwc';
import userProfileStencil from './userProfileStencil.html';
import userProfile from './userProfile.html';
export default class UserProfile extends LightningElement {
@track isLoading = true;
render() {
return this.isLoading ? userProfileStencil : userProfile;
}
renderedCallback() {
// Simulating a long loading time until the component is ready to render.
setTimeout(() => {this.isLoading = false;}, 5000);
}
```