Implement the default loading skeletons count

MisRob · Oct 15, 2024 · b441d88 · b441d88
1 parent 4bd1184
commit b441d88
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 25 deletions.
diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
@@ -744,7 +744,6 @@
         skeletonsConfig1: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 1,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '490px',
@@ -763,7 +762,6 @@
         skeletonsConfig2: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 3,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '490px',
@@ -776,7 +774,6 @@
         skeletonsConfig3: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 2,
             orientation: 'horizontal',
             thumbnailDisplay: 'large',
             thumbnailAlign: 'left',
@@ -790,7 +787,6 @@
         skeletonsConfig4: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 3,
             height: '290px',
           },
           {
@@ -801,7 +797,6 @@
         skeletonsConfig5: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 1,
             orientation: 'horizontal',
             thumbnailDisplay: 'large',
             thumbnailAlign: 'left',
@@ -815,7 +810,6 @@
         skeletonsConfig6: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 1,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '460px',
@@ -834,7 +828,6 @@
         skeletonsConfig7: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 1,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '460px',
@@ -853,7 +846,6 @@
         skeletonsConfig8: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 2,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '400px',

diff --git a/docs/pages/kcardgrid.vue b/docs/pages/kcardgrid.vue
@@ -602,6 +602,10 @@
 
       <p>Use the buttons in the example below to preview.</p>
 
+      <h4>Number of loading skeletons <DocsAnchorTarget anchor="#loading-state-skeletons-count" /></h4>
+
+      <p>By default, the number of loading skeletons corresponds to the number of cards in a single grid row if it were full. This behavior can be overridden via the <code>count</code> attribute (below), however do not override it unless indicated in the designs.</p>
+
       <h4>Loading skeletons configuration</h4>
 
       <p>Use the <code>skeletonsConfig</code> prop to configure skeleton cards to match the expected visual output of loaded cards on all screen sizes. Preview the layout and height of cards with loaded data and adjust <code>skeletonsConfig</code> accordingly.</p>
@@ -610,8 +614,8 @@
 
       <ul>
         <li><code>breakpoints</code> is an array of <code>0-7</code> values corresponding to the <DocsInternalLink text="window breakpoint levels" href="/layout#responsiveness" />. All other attributes in the same object take effect on these breakpoints.</li>
-        <li><code>count</code> sets the number of skeleton cards for the specified breakpoints.</li>
-        <li><code>height</code> sets the height of skeleton cards for the specified breakpoints.  </li>
+        <li><code>count</code> sets the number of skeleton cards for the specified breakpoints. See <DocsInternalLink text="Number of loading skeletons" href="#loading-state-skeletons-count" />.</li>
+        <li><code>height</code> sets the height of skeleton cards for the specified breakpoints.</li>
         <li><code>orientation</code> sets the orientation of skeleton cards for the specified breakpoints. Corresponds to <DocsInternalLink text="KCard's orientation" href="/kcard#prop:orientation" code />.</li>
         <li><code>thumbnailDisplay</code> sets the thumbnail display of skeleton cards for the specified breakpoints. Corresponds to <DocsInternalLink text="KCard's thumbnailDisplay" href="/kcard#prop:thumbnailDisplay" code />.</li>
         <li><code>thumbnailAlign</code> sets the thumbnail alignment of skeleton cards for the specified breakpoints. Corresponds to <DocsInternalLink text="KCard's thumbnailAlign" href="/kcard#prop:thumbnailAlign" code />.</li>
@@ -680,7 +684,6 @@
               skeletonsConfig: [
                 {
                   breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-                  count: 3,
                   thumbnailDisplay: 'large'
                 },
                 {
@@ -701,7 +704,7 @@
       </DocsShowCode>
       <!-- eslint-enable -->
 
-      <p>Here, 3 skeleton cards are shown across all breakpoints. Their height is <code>400px</code> with vertical orientation on breakpoints <code>0-3</code>, and <code>220px</code> with horizontal orientation on breakpoints <code>4-7</code>. This makes skeleton cards resemble loaded cards at all breakpoints, creating a smooth transition for users during data loading.<DocsToggleButton contentId="more-loading-state" /></p>
+      <p>Here, the height of loading skeleton cards is <code>400px</code> with vertical orientation on breakpoints <code>0-3</code>, and <code>220px</code> with horizontal orientation on breakpoints <code>4-7</code>. This makes skeleton cards resemble loaded cards at all breakpoints, creating a smooth transition for users during data loading.<DocsToggleButton contentId="more-loading-state" /></p>
 
       <DocsToggleContent id="more-loading-state">
         <p>Simplify <code>skeletonsConfig</code> by taking a bottom-up approach. Begin with a base setup for all breakpoints and override only where needed. For example, the above configuration can be written as:</p>
@@ -715,7 +718,6 @@
               skeletonsConfig: [
                 {
                   breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-                  count: 3,
                   height: '400px',
                   orientation: 'vertical',
                   thumbnailDisplay: 'large',
@@ -772,7 +774,6 @@
         skeletonsConfig1: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 2,
             orientation: 'horizontal',
             thumbnailDisplay: 'large',
             thumbnailAlign: 'left',
@@ -786,7 +787,6 @@
         skeletonsConfig2: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 3,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '470px',
@@ -803,7 +803,6 @@
         skeletonsConfig3: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 5,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '470px',
@@ -820,7 +819,6 @@
         skeletonsConfig4: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 6,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '360px',
@@ -829,7 +827,6 @@
         skeletonsConfig5: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 3,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '420px',
@@ -842,7 +839,6 @@
         skeletonsConfig6: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 2,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '440px',
@@ -857,7 +853,6 @@
         skeletonsConfig7: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 2,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '430px',
@@ -870,7 +865,6 @@
         skeletonsConfig8: [
           {
             breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
-            count: 3,
             orientation: 'vertical',
             thumbnailDisplay: 'large',
             height: '400px',

diff --git a/lib/cards/useGridLoading.js b/lib/cards/useGridLoading.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import { ref, watch, onMounted, toRefs, computed } from '@vue/composition-api';
 
-import useKResponsiveWindow from '../composables/useKResponsiveWindow';
+import useGridLayout from './useGridLayout';
 import { getBreakpointConfig } from './utils';
 
 // The skeleton loaders will be displayed after `LOADING_DELAY`
@@ -11,7 +11,7 @@ const LOADING_DELAY = 1000;
 const MIN_LOADING_TIME = 1000;
 
 const DEFAULT_SKELETON = {
-  count: 3,
+  count: undefined, // default determined by the grid layout and the current breakpoint
   height: '200px',
   orientation: 'horizontal',
   thumbnailDisplay: 'none',
@@ -22,8 +22,8 @@ const DEFAULT_SKELETON = {
  * Manages `KCardGrid`'s loading state
  */
 export default function useGridLoading(props) {
+  const { currentBreakpointConfig, windowBreakpoint } = useGridLayout(props);
   const { loading, skeletonsConfig } = toRefs(props);
-  const { windowBreakpoint } = useKResponsiveWindow();
 
   const skeletonCount = ref(DEFAULT_SKELETON.count);
   const skeletonHeight = ref(DEFAULT_SKELETON.height);
@@ -103,8 +103,10 @@ export default function useGridLoading(props) {
   // Updates the loading skeleton configuration
   //for the current breakpoint
   watch(
-    [windowBreakpoint, skeletonsConfig],
+    [windowBreakpoint, skeletonsConfig, currentBreakpointConfig],
     ([newBreakpoint]) => {
+      skeletonCount.value = currentBreakpointConfig.value.cardsPerRow;
+
       const breakpointSkeletonconfig = getBreakpointConfig(skeletonsConfig.value, newBreakpoint);
       if (breakpointSkeletonconfig) {
         if (breakpointSkeletonconfig.count) {