KCardGrid part 3: Add advanced grid configuration and loading skeletons

docs/assets/main.scss

@@ -16,7 +16,6 @@ code {
   padding-left: 0.25em;
   font-family: 'Source Code Pro', monospace;
   font-weight: 400;
-  white-space: nowrap;
   background-color: #918caf24;
   border-radius: 0.25em;
 }

docs/pages/kcard.vue

@@ -7,7 +7,11 @@
       <p>It manages the layout, including the thumbnail image, title, and other content. It offers several base layouts and many customization options. Cards like the examples shown can be created, and many others.</p>
 
       <DocsShow block :style="{ maxWidth: '800px' }">
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig1"
+          :loading="loading"  
+        >
           <DocsKCard
             :headingLevel="3"
             :orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
@@ -243,7 +247,11 @@
       <p><code>KCard</code> has two orientations: horizontal and vertical. It is also possible to configure whether a thumbnail area is displayed, its size and alignment. By combining <code>orientation</code>, <code>thumbnailDisplay</code> and <code>thumbnailAlign</code> props, the following card layouts can be achieved to organize diverse kinds of content:</p>
 
       <DocsShow block>
-        <KCardGrid layout="1-2-3">
+        <KCardGrid
+          layout="1-2-3"
+          :skeletonsConfig="skeletonsConfig2"
+          :loading="loading"  
+        >
           <DocsKCard
             :headingLevel="4"
             orientation="vertical"
@@ -303,7 +311,11 @@
       </DocsShow>
 
       <DocsShow block>
-        <KCardGrid layout="1-2-2">
+        <KCardGrid
+          layout="1-2-2"
+          :skeletonsConfig="skeletonsConfig3"
+          :loading="loading"  
+        >
           <DocsKCard
             :headingLevel="4"
             orientation="horizontal"
@@ -324,7 +336,11 @@
       </DocsShow>
 
       <DocsShow block>
-        <KCardGrid layout="1-2-3">
+        <KCardGrid
+          layout="1-2-3"
+          :skeletonsConfig="skeletonsConfig4"
+          :loading="loading"
+        >
           <DocsKCard
             :headingLevel="4"
             orientation="vertical"
@@ -413,7 +429,11 @@
       <p>Use <code>aboveTitle</code>, <code>belowTitle</code>, and <code>footer</code> slots to add content to a card. <code>KCard</code> will organize these areas according to its <DocsInternalLink text="layout configuration" href="#layout" />. Apply custom styling to the inner content of slots to achieve desired effects.</p>
 
       <DocsShow block>
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig5"
+          :loading="loading"  
+        >
           <KCard
             :to="{ path: '#guidelines' }"
             :headingLevel="4"
@@ -494,10 +514,14 @@
 
       <p>When <code>KCard</code> is set to display the thumbnail, the thumbnail area acts as a placeholder if the image is missing, fails to load, or is still loading. In such cases, a light gray background is shown in place of the image.</p>
 
-      <p>Use the <code>thumbnailPlaceholder</code> slot to add a placeholder element, such as an icon, to this area. <em>Provide a placeholder element even if a thumbnail image is available.</em> This serves as a progressive loading experience where the placeholder element is displayed until the image is loaded, and is particularly important on slower networks.</p>
+      <p>Use the <code>thumbnailPlaceholder</code> slot to add a placeholder element, such as an icon, to this area. <em>Provide a placeholder element even if a thumbnail image is available.</em> It serves as fallback content if the image fails to load unexpectedly.</p>
 
       <DocsShow block>
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig6"
+          :loading="loading"  
+        >
           <DocsKCard
             :headingLevel="4"
             :orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
@@ -544,7 +568,11 @@
       <p><em>This applies to all slot content, but considering accessibility is especially important with interactive elements.</em> For instance, <code>ariaLabel</code> is applied to the bookmark icon button in the following example so that screenreaders can communicate its purpose. In production, more work would be needed to indicate the bookmark's toggled state. Always assess on a case-by-case basis.</p>
 
       <DocsShow block>
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig7"
+          :loading="loading"
+        >
           <DocsKCard
             :headingLevel="4"
             :orientation="windowBreakpoint > 2 ? 'horizontal' : 'vertical'"
@@ -592,7 +620,11 @@
       <p>Managing the selection state is not <code>KCard</code>'s responsibility.</p>
 
       <DocsShow block :style="{ maxWidth: '800px' }">
-        <KCardGrid layout="1-1-1">
+        <KCardGrid
+          layout="1-1-1"
+          :skeletonsConfig="skeletonsConfig8"
+          :loading="loading"
+        >
           <DocsKCard
             :to="{ path: '#guidelines' }"
             :headingLevel="4"
@@ -708,8 +740,142 @@
         isBookmarked3: false,
         isFirstCardChecked: false,
         isSecondCardChecked: false,
+        loading: true,
+        skeletonsConfig1: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            count: 1,
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '490px',
+          },
+          {
+            breakpoints: [2],
+            height: '430px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailAlign: 'right',
+            height: '220px',
+          },
+        ],
+        skeletonsConfig2: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            count: 3,
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '490px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            height: '420px',
+          },
+        ],
+        skeletonsConfig3: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            count: 2,
+            orientation: 'horizontal',
+            thumbnailDisplay: 'large',
+            thumbnailAlign: 'left',
+            height: '310px',
+          },
+          {
+            breakpoints: [4, 5, 6, 7],
+            height: '240px',
+          },
+        ],
+        skeletonsConfig4: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            count: 3,
+            height: '290px',
+          },
+          {
+            breakpoints: [4, 5, 6, 7],
+            height: '225px',
+          },
+        ],
+        skeletonsConfig5: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            count: 1,
+            orientation: 'horizontal',
+            thumbnailDisplay: 'large',
+            thumbnailAlign: 'left',
+            height: '300px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            height: '190px',
+          },
+        ],
+        skeletonsConfig6: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            count: 1,
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '460px',
+          },
+          {
+            breakpoints: [2],
+            height: '390px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailAlign: 'right',
+            height: '170px',
+          },
+        ],
+        skeletonsConfig7: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            count: 1,
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '460px',
+          },
+          {
+            breakpoints: [2],
+            height: '390px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailAlign: 'right',
+            height: '170px',
+          },
+        ],
+        skeletonsConfig8: [
+          {
+            breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+            count: 2,
+            orientation: 'vertical',
+            thumbnailDisplay: 'large',
+            height: '400px',
+          },
+          {
+            breakpoints: [2],
+            height: '380px',
+          },
+          {
+            breakpoints: [3, 4, 5, 6, 7],
+            orientation: 'horizontal',
+            thumbnailAlign: 'right',
+            height: '180px',
+          },
+        ],
       };
     },
+    mounted() {
+      setTimeout(() => {
+        this.loading = false;
+      }, 500);
+    },
   };
 
 </script>