Displaying stencils while the components load (#76)

* Displaying stencils while the components load

* Package version release.

README.md

@@ -1723,19 +1723,19 @@ by the `Expression` language.
 
 ### Unlocked Package (`expression` namespace)
 
-[![Install Unlocked Package in a Sandbox](assets/btn-install-unlocked-package-sandbox.png)](https://test.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011Mi4IAE)
-[![Install Unlocked Package in Production](assets/btn-install-unlocked-package-production.png)](https://login.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011Mi4IAE)
+[![Install Unlocked Package in a Sandbox](assets/btn-install-unlocked-package-sandbox.png)](https://test.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011Mi9IAE)
+[![Install Unlocked Package in Production](assets/btn-install-unlocked-package-production.png)](https://login.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011Mi9IAE)
 
 Install with SF CLI:
 
 ```shell
-sf package install --apex-compile package --wait 20 --package 04tDm0000011Mi4IAE
+sf package install --apex-compile package --wait 20 --package 04tDm0000011Mi9IAE
 ```
 
 Install with SFDX CLI:
 
 ```shell
-sfdx force:package:install --apexcompile package --wait 20 --package 04tDm0000011Mi4IAE
+sfdx force:package:install --apexcompile package --wait 20 --package 04tDm0000011Mi9IAE
 ```
 
 ## Components

expression-components/main/ui/components/base/lwc/expressionElementContainer/expressionElementContainer.html

@@ -1,5 +1,14 @@
 <template>
-    <slot></slot>
+    <template lwc:if={loading}>
+        <div class="animate-pulse flex space-x-4 h-20">
+            <div class="flex-1 space-y-6 py-1">
+                <div class="bg-slate-200 rounded h-full"></div>
+            </div>
+        </div>
+    </template>
+    <template lwc:else>
+        <slot></slot>
+    </template>
     <div if:true={cannotShowPreview}>
         <c-alert type="warning" title="Unable to show preview"
                  message="To see a preview of the component, please provide a Preview Context ID when the Context URL Parameter is set.">

expression-components/main/ui/components/base/lwc/expressionElementContainer/expressionElementContainer.js

@@ -3,4 +3,5 @@ import { LightningElement, api } from 'lwc';
 export default class ExpressionElementContainer extends LightningElement {
   @api cannotShowPreview = false;
   @api error = null;
+  @api loading = false;
 }

expression-components/main/ui/components/exposed/lwc/button/button.html

@@ -1,5 +1,5 @@
 <template>
-    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error}>
+    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error} loading={loading}>
         <div if:true={ready}>
             <c-base-button action={computed} size="lg"></c-base-button>
         </div>

expression-components/main/ui/components/exposed/lwc/features/features.html

@@ -1,5 +1,5 @@
 <template>
-    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error}>
+    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error} loading={loading}>
         <div lwc:if={ready} class="mx-auto max-w-7xl">
             <div if:true={hasText} class="mx-auto max-w-2xl lg:mx-0">
                 <h2 if:true={computed.title} class="text-3xl font-bold tracking-tight text-dxp-text-contrast sm:text-4xl">

expression-components/main/ui/components/exposed/lwc/hero/hero.html

@@ -1,5 +1,5 @@
 <template>
-    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error}>
+    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error} loading={loading}>
         <div if:true={ready} class="relative isolate overflow-hidden bg-dxp-bg-root">
             <div class={containerClasses}>
                 <div class={mainClasses}>

expression-components/main/ui/components/exposed/lwc/logos/logos.html

@@ -1,5 +1,5 @@
 <template>
-    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error}>
+    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error} loading={loading}>
         <div if:true={ready} class="relative isolate overflow-hidden bg-dxp-bg-root">
             <div class="bg-dxp-bg-root">
                 <div class="mx-auto max-w-7xl px-6 lg:px-8">

expression-components/main/ui/components/exposed/lwc/navBar/navBar.html

@@ -1,5 +1,5 @@
 <template>
-    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error}>
+    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error} loading={loading}>
         <header if:true={ready} class="inset-x-0 top-0 z-50">
             <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
                 <div class="flex lg:flex-1">

expression-components/main/ui/components/exposed/lwc/people/people.html

@@ -1,5 +1,5 @@
 <template>
-    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error}>
+    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error} loading={loading}>
         <div if:true={ready}>
             <div class="mx-auto max-w-7xl px-6 lg:px-8">
                 <div if:true={hasText} class="mx-auto max-w-2xl sm:text-center">

expression-components/main/ui/components/exposed/lwc/pricingTable/pricingTable.html

@@ -1,5 +1,5 @@
 <template>
-    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error}>
+    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error} loading={loading}>
         <div if:true={ready}>
             <div class="mx-auto max-w-7xl px-6 lg:px-8">
                 <div class="mx-auto max-w-4xl sm:text-center">

expression-components/main/ui/components/exposed/lwc/stats/stats.html

@@ -1,5 +1,5 @@
 <template>
-    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error}>
+    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error} loading={loading}>
         <div lwc:if={ready}>
             <div class="mx-auto max-w-7xl">
                 <div class="mx-auto max-w-2xl lg:max-w-none">

expression-components/main/ui/components/exposed/lwc/textBlock/textBlock.html

@@ -1,5 +1,5 @@
 <template>
-    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error}>
+    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error} loading={loading}>
         <div if:true={ready} class={containerClasses}>
             <span style={textStyle}>{computed}</span>
         </div>

sfdx-project.json

@@ -10,8 +10,8 @@
     {
       "path": "expression-components",
       "package": "Expression Components",
-      "versionName": "Version 1.1",
-      "versionNumber": "1.1.0.NEXT",
+      "versionName": "Version 1.2",
+      "versionNumber": "1.2.0.NEXT",
       "default": false,
       "dependencies": [
         {
@@ -35,6 +35,7 @@
     "Expression (Unlocked)@1.24.0-1": "04tDm0000011MhkIAE",
     "Expression [email protected]": "04tDm0000011MhpIAE",
     "Expression (Unlocked)@1.25.0-2": "04tDm0000011MhzIAE",
-    "Expression [email protected]": "04tDm0000011Mi4IAE"
+    "Expression [email protected]": "04tDm0000011Mi4IAE",
+    "Expression [email protected]": "04tDm0000011Mi9IAE"
   }
-}
+}