{"id":16981783,"url":"https://github.com/cesarparra/lightning-stencil","last_synced_at":"2025-03-17T08:38:12.906Z","repository":{"id":43983574,"uuid":"239372716","full_name":"cesarParra/lightning-stencil","owner":"cesarParra","description":"Make your components feel faster by using building stencil (skeleton) that closely match your component's final output","archived":false,"fork":false,"pushed_at":"2024-06-18T11:05:42.000Z","size":1529,"stargazers_count":38,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-14T17:03:37.717Z","etag":null,"topics":["lightning","lwc","salesforce","skeleton","stencil"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cesarParra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-09T20:53:52.000Z","updated_at":"2025-02-18T19:06:22.000Z","dependencies_parsed_at":"2024-06-18T12:12:06.869Z","dependency_job_id":"504cf0dc-6f90-493c-a768-1196a5c41ce9","html_url":"https://github.com/cesarParra/lightning-stencil","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesarParra%2Flightning-stencil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesarParra%2Flightning-stencil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesarParra%2Flightning-stencil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesarParra%2Flightning-stencil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cesarParra","download_url":"https://codeload.github.com/cesarParra/lightning-stencil/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243853683,"owners_count":20358461,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lightning","lwc","salesforce","skeleton","stencil"],"created_at":"2024-10-14T02:06:28.287Z","updated_at":"2025-03-17T08:38:12.161Z","avatar_url":"https://github.com/cesarParra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lightning Stencil\n\nLightning Stencil to provide a skeleton of your lightning web components while they are loading. Stencils help\nprovide a sense of faster loading times by giving your users an immediate sense of the layout that will be loaded.\n\nBuilt following the [Salesforce Lightning Design System Loading specification for stencils.](https://www.lightningdesignsystem.com/guidelines/loading/)\n\n![Stencil](./images/stencil.gif)\n\n## Basic Usage\n\nDeploy the `stencil` web component and reference it in the component you want to use it.\n\n```html\n\u003cc-stencil\u003e\u003c/c-stencil\u003e\n```\n\n## Height\n\nTo specify a height use the `height` property and pass in a value in pixes.\n\n```html\n\u003cc-stencil height=\"200\"\u003e\u003c/c-stencil\u003e\n```\n\n![Stencil](./images/height.gif)\n\n## Width\n\nTo specify a width use the `width` property and pass in a value in pixes.\n\n```html\n\u003cc-stencil width=\"200\"\u003e\u003c/c-stencil\u003e\n```\n\n![Stencil](./images/width.gif)\n\n## Color variants\n\nStencils come in 3 different variants, `light`, `medium`, and `dark`.\nUse the `weight-variant` property to specify the desired color variant.\n\n```html\n\u003cc-stencil weight-variant=\"light\"\u003e\u003c/c-stencil\u003e\n\u003cc-stencil weight-variant=\"medium\"\u003e\u003c/c-stencil\u003e\n\u003cc-stencil weight-variant=\"dark\"\u003e\u003c/c-stencil\u003e\n```\n\n![Stencil](./images/variants.gif)\n\n## Circles\n\nTo create stencils in the shape of a circle, which can be used when creating a user card with a profile picture, for instance\nuse the `circle` property:\n\n```html\n\u003cc-stencil circle=\"true\" height=\"50\" width=\"50\"\u003e\u003c/c-stencil\u003e\n```\n\n![Stencil](./images/circle.gif)\n\n## Multi-Line Stencils\n\nTo simulate a paragraph block use the `count` property to output multiple stencil lines\nwith a single component:\n\n```html\n\u003cc-stencil height=\"10\" count=\"5\"\u003e\u003c/c-stencil\u003e\n```\n\n![Stencil](./images/count.gif)\n\n## Example - User profile card\n\nBy taking advantage of [LWC's conditional rendering](https://developer.salesforce.com/docs/component-library/documentation/lwc/create_conditional) capabilities we can build entire stencil\ncomponents that are displayed to the user until your component's contents load and are ready \nto be displayed to the user.\n\nLet's take a user profile component called that has the following markup in the `userProfile.html` template:\n\n```html\n  \u003carticle class=\"slds-card slds-p-around_x-small\"\u003e\n    \u003cdiv class=\"slds-grid slds-gutters\"\u003e\n      \u003cdiv class=\"slds-col slds-size_1-of-12 slds-m-right_x-small\"\u003e\n        \u003clightning-icon icon-name=\"action:user\"\u003e\u003c/lightning-icon\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"slds-col slds-size_11-of-12\"\u003e\n        \u003ch2\u003eJohn Smith\u003c/h2\u003e\n        \u003ch3\u003eCEO\u003c/h3\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003clightning-card \u003e\n      \u003cp\u003e\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod \n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, \n        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \n        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat \n        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia \n        deserunt mollit anim id est laborum.\n      \u003c/p\u003e\n    \u003c/lightning-card\u003e\n  \u003c/article\u003e\n```\n\nTo build a stencil (skeleton) for our component we can:\n\n*  Build an alternative HTML template that uses the exact same layout as the\nmain component, but we substitute the places where we display data for `stencil` references.\n\nLet's call it `userProfileStencil.html` and place it in the same directory as the main component.\n\n```html\n  \u003carticle class=\"slds-card slds-p-around_x-small\"\u003e\n    \u003cdiv class=\"slds-grid slds-gutters\"\u003e\n      \u003cdiv class=\"slds-col slds-size_1-of-12 slds-m-right_x-small\"\u003e\n        \u003cc-stencil circle=\"true\" height=\"50\" width=\"50\"\u003e\u003c/c-stencil\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"slds-col slds-size_11-of-12\"\u003e\n        \u003cc-stencil height=\"20\" width=\"300\"\u003e\u003c/c-stencil\u003e\n        \u003cc-stencil width=\"200\"\u003e\u003c/c-stencil\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003clightning-card \u003e\n      \u003cc-stencil height=\"5\" count=\"5\"\u003e\u003c/c-stencil\u003e\n    \u003c/lightning-card\u003e\n  \u003c/article\u003e\n```\n\n* Reference the stencil template while your component loads\n\nImport both templates and use the `render` method to decide when the stencil\nshould load or when your component is ready to render.\n\n```javascript\nimport { LightningElement, track } from 'lwc';\nimport userProfileStencil from './userProfileStencil.html';\nimport userProfile from './userProfile.html';\n\nexport default class UserProfile extends LightningElement {\n  @track isLoading = true;\n\n  render() {\n    return this.isLoading ? userProfileStencil : userProfile;\n  }\n\n  renderedCallback() {\n    // Simulating a long loading time until the component is ready to render.\n    setTimeout(() =\u003e {this.isLoading = false;}, 5000);\n  }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesarparra%2Flightning-stencil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcesarparra%2Flightning-stencil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesarparra%2Flightning-stencil/lists"}