Merge pull request #65 from etchteam/feature/etch-537-the-loading-ske…

…leton-recipe-or-components-need-improving docs: crisp loading demo and add loading delay
etchteam · Jun 3, 2024 · d5ce15b · d5ce15b
2 parents a5101dc + 72d52cc
commit d5ce15b
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 67 deletions.
diff --git a/components/content/Img/Img.stories.ts b/components/content/Img/Img.stories.ts
@@ -26,7 +26,7 @@ export const Img: StoryObj = {
       object-position="${args.objectPosition}"
     >
       <img
-        src="https://placehold.it/300x300"
+        src="https://placehold.co/300x300"
         alt="Placeholder"
         width="300"
         height="300"

diff --git a/docs/recipes/LoadingPage.ts b/docs/recipes/LoadingPage.ts
@@ -6,10 +6,21 @@ function randomBetween(min: number, max: number) {
   return Math.floor(Math.random() * (max - min + 1) + min);
 }
 
+interface CardData {
+  title: string;
+  description: string;
+  image: {
+    src: string;
+    width: number;
+    height: number;
+    alt: string;
+  };
+}
+
 @customElement('docs-loading-page')
 export class DocsLoadingPage extends LitElement {
   @state() page: any = null;
-  @state() cards: any = null;
+  @state() cards: CardData[] = [];
 
   connectedCallback(): void {
     super.connectedCallback();
@@ -32,7 +43,7 @@ export class DocsLoadingPage extends LitElement {
             description:
               'Invisible components that provide structure to layouts.',
             image: {
-              src: 'https://placehold.it/400x300',
+              src: 'https://placehold.co/400x300',
               width: 400,
               height: 300,
               alt: 'Placeholder',
@@ -42,7 +53,7 @@ export class DocsLoadingPage extends LitElement {
             title: 'Canvas',
             description: 'Coloured boxes to pour content in to.',
             image: {
-              src: 'https://placehold.it/400x300',
+              src: 'https://placehold.co/400x300',
               width: 400,
               height: 300,
               alt: 'Placeholder',
@@ -52,7 +63,7 @@ export class DocsLoadingPage extends LitElement {
             title: 'Content',
             description: 'Text, images and data for users to consume.',
             image: {
-              src: 'https://placehold.it/400x300',
+              src: 'https://placehold.co/400x300',
               width: 400,
               height: 300,
               alt: 'Placeholder',
@@ -63,7 +74,7 @@ export class DocsLoadingPage extends LitElement {
             description:
               'Interactive elements, such as buttons, links and form inputs.',
             image: {
-              src: 'https://placehold.it/400x300',
+              src: 'https://placehold.co/400x300',
               width: 400,
               height: 300,
               alt: 'Placeholder',
@@ -107,12 +118,14 @@ export class DocsLoadingPage extends LitElement {
         <diamond-wrap
           size="md"
           gutter="md"
-          class="diamond-text-align-center diamond-spacing-bottom-fluid-sm"
+          class="diamond-text-align-center diamond-spacing-bottom-fluid"
         >
           ${page
             ? html`
-                <h1>${page?.title}</h1>
-                <p>${page?.description}</p>
+                <diamond-enter type="fade">
+                  <h1>${page?.title}</h1>
+                  <p>${page?.description}</p>
+                </diamond-enter>
               `
             : html`
                 <h1>
@@ -129,81 +142,85 @@ export class DocsLoadingPage extends LitElement {
         </diamond-wrap>
         <diamond-wrap size="xxl" gutter="md">
           <diamond-grid wrap="wrap">
-            ${cards
+            ${cards.length
               ? cards.map(
                   (card) => html`
                     <diamond-grid-item
                       small-mobile="12"
                       tablet="6"
-                      desktop="3"
+                      large-tablet="3"
                       fill
                     >
                       <diamond-card class="theme-light" radius>
-                        <diamond-img
-                          radius
-                          full-width
-                          responsive
-                          block
-                          class="diamond-spacing-bottom-md"
-                        >
-                          <img
-                            src="${card.image.src}"
-                            alt="${card.image.alt}"
-                            width="${card.image.width}"
-                            height="${card.image.height}"
-                          />
-                        </diamond-img>
+                        <diamond-enter type="fade">
+                          <diamond-img
+                            radius
+                            full-width
+                            responsive
+                            block
+                            class="diamond-spacing-bottom-md"
+                          >
+                            <img
+                              src="${card.image.src}"
+                              alt="${card.image.alt}"
+                              width="${card.image.width}"
+                              height="${card.image.height}"
+                            />
+                          </diamond-img>
 
-                        <h2 class="diamond-text-size-h3">${card.title}</h2>
-                        <p class="diamond-spacing-bottom-lg">
-                          ${card.description}
-                        </p>
+                          <h2 class="diamond-text-size-h3">${card.title}</h2>
+                          <p class="diamond-spacing-bottom-lg">
+                            ${card.description}
+                          </p>
 
-                        <diamond-button width="full-width">
-                          <button type="button">Read More</button>
-                        </diamond-button>
+                          <diamond-button width="full-width">
+                            <button type="button">Read More</button>
+                          </diamond-button>
+                        </diamond-enter>
                       </diamond-card>
                     </diamond-grid-item>
                   `,
                 )
               : [1, 2, 3, 4].map(
-                  () => html`
+                  (i) => html`
                     <diamond-grid-item
                       small-mobile="12"
                       tablet="6"
-                      desktop="3"
+                      large-tablet="3"
                       fill
                     >
-                      <diamond-card radius class="theme-light">
-                        <diamond-img
-                          radius
-                          full-width
-                          responsive
-                          block
-                          class="diamond-spacing-bottom-md"
-                        >
-                          <diamond-loading-img
-                            width="400"
-                            height="300"
-                          ></diamond-loading-img>
-                        </diamond-img>
-                        <h2 class="diamond-text-size-h3">
-                          <diamond-loading-text>
-                            Card title
-                          </diamond-loading-text>
-                        </h2>
-                        <p class="diamond-spacing-bottom-lg">
-                          <diamond-loading-text>
-                            Lorem ipsum dolor consequit sit amet epsilon evitcus
-                            smartrum.
-                          </diamond-loading-text>
-                        </p>
-                        <diamond-button width="full-width">
-                          <diamond-loading-button>
-                            Button text
-                          </diamond-loading-button>
-                        </diamond-button>
-                      </diamond-card>
+                      <diamond-enter type="fade-in-up" delay="${i * 0.1}">
+                        <diamond-card radius class="theme-light">
+                          <diamond-img
+                            radius
+                            full-width
+                            responsive
+                            block
+                            class="diamond-spacing-bottom-md"
+                          >
+                            <diamond-loading-img
+                              width="400"
+                              height="300"
+                            ></diamond-loading-img>
+                          </diamond-img>
+                          <h2 class="diamond-text-size-h3">
+                            <diamond-loading-text>
+                              Card title
+                            </diamond-loading-text>
+                          </h2>
+                          <p class="diamond-spacing-bottom-lg">
+                            <diamond-loading-text>
+                              Lorem ipsum dolor consequit sit amet epsilon
+                              evitcus smartrum.
+                            </diamond-loading-text>
+                          </p>
+                          <diamond-button width="full-width">
+                            <diamond-loading-button>
+                              Button text
+                            </diamond-loading-button>
+                          </diamond-button>
+                        </diamond-card>
+                      </diamond-enter>
                     </diamond-grid-item>
                   `,
                 )}

diff --git a/docs/recipes/LoadingSkeleton.stories.ts b/docs/recipes/LoadingSkeleton.stories.ts
@@ -5,6 +5,7 @@ import './LoadingPage';
 import '../../components/content/LoadingImg/LoadingImg';
 import '../../components/content/LoadingText/LoadingText';
 import '../../components/content/LoadingButton/LoadingButton';
+import '../../components/composition/Enter/Enter';
 
 export default {
   title: 'Recipes/Loading Skeleton',

diff --git a/example/index.html b/example/index.html
@@ -11,7 +11,7 @@
     <diamond-wrap size="lg" gutter="md">
       <diamond-card href="#">
         <diamond-img fit="cover">
-          <img src="https://placehold.it/350x150" alt="placeholder">
+          <img src="https://placehold.co/350x150" alt="placeholder">
         </diamond-img>
         <h2>Card title</h2>
         <p>

diff --git a/lib/pulse.ts b/lib/pulse.ts
@@ -1,6 +1,16 @@
 import { css } from 'lit';
 
 export const pulse = css`
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
   @keyframes pulse {
     0% {
       background-position: 200% 0;
@@ -12,8 +22,11 @@ export const pulse = css`
   }
 
   :host {
-    animation: pulse var(--diamond-transition-duration-pulse) infinite
-      var(--diamond-transition-timing-pulse);
+    animation:
+      fade-in var(--diamond-transition-duration-enter) forwards
+        var(--diamond-transition-timing-enter) var(--diamond-loading-delay),
+      pulse var(--diamond-transition-duration-pulse) infinite
+        var(--diamond-transition-timing-pulse);
     appearance: none;
     background: linear-gradient(
       to right,
@@ -25,6 +38,7 @@ export const pulse = css`
     background-size: 200% 100%;
     color: transparent;
     display: inline-block;
+    opacity: 0;
     pointer-events: none;
     user-select: none;
   }

diff --git a/styles/tokens.css b/styles/tokens.css
@@ -5,6 +5,7 @@
 @import url('./tokens/icon.css');
 @import url('./tokens/input.css');
 @import url('./tokens/label.css');
+@import url('./tokens/loading.css');
 @import url('./tokens/radius.css');
 @import url('./tokens/shadow.css');
 @import url('./tokens/spacing.css');

diff --git a/styles/tokens/loading.css b/styles/tokens/loading.css
@@ -0,0 +1,3 @@
+:root {
+  --diamond-loading-delay: 0.5s;
+}