KSkeletonLoader link to current page

pull/841 | Release notes

Usage
#

In all the modes below, KSkeletonLoader provides delay and minimum loading time optimizations. What differs is only apperiance of skeletons. KSkeletonLoader is built to allow for experimentation and adding of new skeleton appearances easily.

Generic


      <KSkeletonLoader
        :loading="loading"
        appearance="generic"
      >
        <h3>Learn everything about hummingbirds</h3>

        <p>Discover how hummingbirds play a big role in nature despite their small size. Find out more about their beauty, how they help plants grow, and where they live.</p>

        <p>Discover how hummingbirds play a big role in nature despite their small size. Find out more about their beauty, how they help plants grow, and where they live.</p>
      </KSkeletonLoader>

Card grid: over more sections

If there are more sections on a page being loaded, in some situations it may be best to show only one skeleton grid to prevent section jumps.


      <KSkeletonLoader
        :loading="loading"
        :config="config"
        appearance="cardGrid"
      >
        <h3>Section 1</h3>
        <KCardGrid layout="1-1-1">
          <KCard
            v-for="i in 2"
            ...
          />
        </KCardGrid>

        <h3>Section 2</h3>
        <KCardGrid layout="1-1-1">
          <KCard
            v-for="i in 2"
            ...
          />
        </KCardGrid>
      </KSkeletonLoader>

Card grid: for each section

If we want to achieve even better progressive loading experience, we can also show skeletons for each section individually. In this case, some other measure may be needed for smooth transitioning, here for example min-height is set on each section to mitigate jump.

Section 1

Section 2


      <section :style="{ 'min-height': '230px' }">
        <h3>Section 1</h3>
        <KSkeletonLoader
          :loading="loading"
          :config="config"
          appearance="cardGrid"
        >
          <KCardGrid layout="1-1-1">
            <KCard
              v-for="i in 2"
              ...
            />
          </KCardGrid>
        </KSkeletonLoader>
      </section>

      <section :style="{ 'min-height': '230px' }">
        <h3>Section 2</h3>
        <KSkeletonLoader
          :loading="loading"
          :config="config"
          appearance="cardGrid"
        >
          <KCardGrid layout="1-1-1">
            <KCard
              v-for="i in 2"
              ...
            />
          </KCardGrid>
        </KSkeletonLoader>
      </section>

Custom

If generic or card skeletons are not suitable, it is possible to provide a custom skeleton shape via the #skeleton slot. All transition and animations will be applied on it automatically. This can be used for experimentation with new skeleton shapes that can later be moved to KDS as a new appearance mode if needed.


      <KSkeletonLoader
        :loading="loading"
        appearance="custom"
      >
        <template #skeleton>
          <div
            class="shape-1"
            :style="{ backgroundColor: $themePalette.grey.v_100 }"
          ></div>
          <div
            class="shape-2"
            :style="{ backgroundColor: $themePalette.grey.v_100 }"
          ></div>
        </template>

        <template>
          <h3>Learn everything about hummingbirds</h3>

          <p>Discover how hummingbirds play a big role in nature despite their small size. Find out more about their beauty, how they help plants grow, and where they live.</p>

          <p>Discover how hummingbirds play a big role in nature despite their small size. Find out more about their beauty, how they help plants grow, and where they live.</p>
        </template>
      </KSkeletonLoader>
    

      .shape-1,
      .shape-2 {
        height: 100px;
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 4px;
      }

      .shape-1 {
        width: 100%;
      }

      .shape-2 {
        width: 80%;
      }

Props
#

Name Description Type Default Required
loading
#
 — boolean false —
appearance
#
 — string 'generic' —
config
#
 — object null —

Slots
#

Name Description
default
#
 —
skeleton
#
 —