wip

docs/tableOfContents.js

@@ -448,6 +448,11 @@ export default [
         title: 'KFocusTrap',
         isCode: true,
       }),
+      new Page({
+        path: '/kskeletonloader',
+        title: 'KSkeletonLoader',
+        isCode: true,
+      }),
     ],
   }),
 ];

lib/KSkeletonLoader/SkeletonCustom.vue

@@ -0,0 +1,48 @@
+<template>
+
+  <div class="wrapper">
+    <slot></slot>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'SkeletonCustom',
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '../styles/definitions';
+
+  @keyframes loading {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .wrapper {
+    position: relative;
+  }
+
+  .wrapper::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background: linear-gradient(270deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
+    animation: loading 1.5s infinite ease-in-out;
+  }
+
+</style>

lib/KSkeletonLoader/SkeletonGeneric.vue

@@ -0,0 +1,82 @@
+<template>
+
+  <div class="wrapper">
+    <div
+      class="shape-1"
+      :style="{ backgroundColor: $themePalette.grey.v_100 }"
+    ></div>
+
+    <div
+      class="shape-2"
+      :style="{ backgroundColor: $themePalette.grey.v_100 }"
+    ></div>
+
+    <div
+      class="shape-3"
+      :style="{ backgroundColor: $themePalette.grey.v_100 }"
+    ></div>
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'SkeletonGeneric',
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '../styles/definitions';
+
+  @keyframes loading {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .shape-1,
+  .shape-2,
+  .shape-3 {
+    height: 28px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border-radius: 4px;
+  }
+
+  .shape-1 {
+    width: 100%;
+  }
+
+  .shape-2 {
+    width: 90%;
+  }
+
+  .shape-3 {
+    width: 80%;
+  }
+
+  .wrapper {
+    position: relative;
+  }
+
+  .wrapper::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background: linear-gradient(270deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
+    animation: loading 1.5s infinite ease-in-out;
+  }
+
+</style>

lib/KSkeletonLoader/index.vue

@@ -0,0 +1,140 @@
+<template>
+
+  <div v-if="show">
+    <template v-if="appearance === 'generic'">
+      <transition name="fade" mode="out-in" appear>
+        <SkeletonGeneric
+          v-if="isLoading"
+          key="loading"
+        />
+        <div
+          v-else
+          key="loaded"
+        >
+          <slot></slot>
+        </div>
+      </transition>
+    </template>
+
+    <template v-else-if="appearance === 'cardGrid'">
+      <transition name="fade" mode="out-in" appear>
+        <KCardGrid
+          v-if="isLoading"
+          key="loading"
+          :layout="grid.layout"
+          :layoutOverride="grid.layoutOverride"
+        >
+          <SkeletonCard
+            v-for="i in grid.skeletonCount"
+            :key="i"
+            :height="grid.skeletonHeight"
+            :orientation="grid.skeletonOrientation"
+            :thumbnailDisplay="grid.skeletonThumbnailDisplay"
+            :thumbnailAlign="grid.skeletonThumbnailAlign"
+          />
+        </KCardGrid>
+        <div
+          v-else
+          key="loaded"
+        >
+          <slot></slot>
+        </div>
+      </transition>
+    </template>
+
+    <template v-else-if="appearance === 'custom'">
+      <transition name="fade" mode="out-in" appear>
+        <div
+          v-if="isLoading"
+          key="loading"
+        >
+          <SkeletonCustom>
+            <slot name="skeleton"></slot>
+          </SkeletonCustom>
+        </div>
+        <div
+          v-else
+          key="loaded"
+        >
+
+          <slot></slot>
+        </div>
+      </transition>
+    </template>
+  </div>
+
+</template>
+
+
+<script>
+
+  import SkeletonCard from './SkeletonCard';
+  import SkeletonGeneric from './SkeletonGeneric';
+  import SkeletonCustom from './SkeletonCustom';
+  import useLoading from './useLoading';
+
+  export default {
+    name: 'KSkeletonLoader',
+    components: {
+      SkeletonCard,
+      SkeletonCustom,
+      SkeletonGeneric,
+    },
+    setup(props) {
+      const { show, isLoading, grid } = useLoading(props);
+
+      return {
+        show,
+        isLoading,
+        grid,
+      };
+    },
+    props: {
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      loading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      // eslint-enable-next-line kolibri/vue-no-unused-properties
+      // 'generic', 'cardGrid', 'custom'
+      appearance: {
+        required: false,
+        type: String,
+        default: 'generic',
+      },
+      // for grid: { `layout`, `layoutOverride`, `skeletonsConfig` }
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      config: {
+        type: Object,
+        required: false,
+        default: null,
+      },
+      // eslint-enable-next-line kolibri/vue-no-unused-properties
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .fade-enter-active,
+  .fade-appear-active {
+    transition: opacity 0.5s ease;
+  }
+
+  .fade-leave-to {
+    opacity: 0.2;
+  }
+
+  .fade-enter,
+  .fade-appear {
+    opacity: 0;
+  }
+
+</style>

lib/KSkeletonLoader/useGridLoading.js

@@ -0,0 +1,59 @@
+import { ref, watch } from '@vue/composition-api';
+
+import useGridLayout from '../cards/useGridLayout';
+import { getBreakpointConfig } from '../cards/utils';
+
+const DEFAULT_SKELETON = {
+  count: undefined, // default determined by the grid layout and the current breakpoint
+  height: '200px',
+  orientation: 'horizontal',
+  thumbnailDisplay: 'none',
+  thumbnailAlign: 'left',
+};
+
+export default function useGridLoading(skeletonsConfig, layout, layoutOverride) {
+  const { currentBreakpointConfig, windowBreakpoint } = useGridLayout(layout, layoutOverride);
+
+  const skeletonCount = ref(DEFAULT_SKELETON.count);
+  const skeletonHeight = ref(DEFAULT_SKELETON.height);
+  const skeletonOrientation = ref(DEFAULT_SKELETON.orientation);
+  const skeletonThumbnailDisplay = ref(DEFAULT_SKELETON.thumbnailDisplay);
+  const skeletonThumbnailAlign = ref(DEFAULT_SKELETON.thumbnailAlign);
+
+  // Updates the loading skeleton configuration
+  //for the current breakpoint
+  watch(
+    [windowBreakpoint, skeletonsConfig, currentBreakpointConfig],
+    ([newBreakpoint]) => {
+      skeletonCount.value = currentBreakpointConfig.value.cardsPerRow;
+
+      const breakpointSkeletonConfig = getBreakpointConfig(skeletonsConfig.value, newBreakpoint);
+      if (breakpointSkeletonConfig) {
+        if (breakpointSkeletonConfig.count) {
+          skeletonCount.value = breakpointSkeletonConfig.count;
+        }
+        if (breakpointSkeletonConfig.height) {
+          skeletonHeight.value = breakpointSkeletonConfig.height;
+        }
+        if (breakpointSkeletonConfig.orientation) {
+          skeletonOrientation.value = breakpointSkeletonConfig.orientation;
+        }
+        if (breakpointSkeletonConfig.thumbnailDisplay) {
+          skeletonThumbnailDisplay.value = breakpointSkeletonConfig.thumbnailDisplay;
+        }
+        if (breakpointSkeletonConfig.thumbnailAlign) {
+          skeletonThumbnailAlign.value = breakpointSkeletonConfig.thumbnailAlign;
+        }
+      }
+    },
+    { immediate: true, deep: true }
+  );
+
+  return {
+    skeletonCount,
+    skeletonHeight,
+    skeletonOrientation,
+    skeletonThumbnailDisplay,
+    skeletonThumbnailAlign,
+  };
+}