Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@MisRob
MisRob committed Nov 22, 2024
1 parent 40eca53 commit 46ceb1a
Show file tree
Hide file tree
Showing 11 changed files with 633 additions and 238 deletions.
286 changes: 286 additions & 0 deletions docs/pages/kskeletonloader.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,286 @@
<template>

<DocsPageTemplate apiDocs>
<DocsPageSection title="Usage" anchor="#usage">
In all the modes below, <code>KSkeletonLoader</code> provides delay and minimum loading time optimizations. What differs is only apperiance of skeletons. <code>KSkeletonLoader</code> is built to allow for experimentation and adding of new skeleton appearances easily.

<h2>Generic</h2>
<!-- eslint-disable -->
<DocsShowCode language="html">
<KSkeletonLoader
:loading="loading"
appearance="generic"
>
<p>Hi there, data is loaded!</p>
</KSkeletonLoader>
</DocsShowCode>
<!-- eslint-enable -->

<h2>Card skeletons over more sections</h2>
<p>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.</p>

<div :style="{ display: 'flex', justifyContent: 'flex-end' }">
<KButtonGroup>
<KButton primary @click="load500">
Load (0.5 s)
</KButton>
<KButton primary @click="load1200">
Load (1.2 s)
</KButton>
<KButton primary @click="load4000">
Load (4 s)
</KButton>
</KButtonGroup>
</div>

<DocsShow block>
<KSkeletonLoader
:loading="loading"
:config="config"
appearance="cardGrid"
>
<h3>Section 1</h3>
<KCardGrid layout="1-1-1">
<DocsKCard
v-for="i in 2"
:key="i"
:headingLevel="6"
:prependTitle="`(${i})`"
orientation="horizontal"
/>
</KCardGrid>

<h3>Section 2</h3>
<KCardGrid layout="1-1-1">
<DocsKCard
v-for="i in 2"
:key="i"
:headingLevel="6"
:prependTitle="`(${i})`"
orientation="horizontal"
/>
</KCardGrid>
</KSkeletonLoader>
</DocsShow>

<!-- eslint-disable -->
<DocsShowCode language="html">
<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>
</DocsShowCode>
<!-- eslint-enable -->

<h2>Card skeletons for each section</h2>
<p>If we want to achieve 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 <code>min-height</code> is set on each section to mitigate jump.</p>

<div :style="{ display: 'flex', justifyContent: 'flex-end' }">
<KButtonGroup>
<KButton primary @click="load500">
Load (0.5 s)
</KButton>
<KButton primary @click="load1200">
Load (1.2 s)
</KButton>
<KButton primary @click="load4000">
Load (4 s)
</KButton>
</KButtonGroup>
</div>

<DocsShow block>
<section :style="{ 'min-height': '230px' }">
<h3>Section 1</h3>
<KSkeletonLoader
:loading="loading"
:config="config2"
appearance="cardGrid"
>
<KCardGrid layout="1-1-1">
<DocsKCard
v-for="i in 2"
:key="i"
:headingLevel="6"
:prependTitle="`(${i})`"
orientation="horizontal"
/>
</KCardGrid>
</KSkeletonLoader>
</section>

<h3>Section 2</h3>
<section :style="{ 'min-height': '230px' }">
<KSkeletonLoader
:loading="loading"
:config="config2"
appearance="cardGrid"
>
<KCardGrid layout="1-1-1">
<DocsKCard
v-for="i in 2"
:key="i"
:headingLevel="6"
:prependTitle="`(${i})`"
orientation="horizontal"
/>
</KCardGrid>
</KSkeletonLoader>
</section>
</DocsShow>

<!-- eslint-disable -->
<DocsShowCode language="html">
<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>
</DocsShowCode>
<!-- eslint-enable -->

<h2>Custom</h2>
<p>If generic or card skeletons are not suitable, it is possible to use a customized skeleton via the <code>#skeleton</code> slot. This can be used for experimentation with new skeleton elements that can later be moved to KDS as a new <code>appearance</code> mode if needed.</p>

<!-- eslint-disable -->
<DocsShowCode language="html">
<KSkeletonLoader
:loading="loading"
appearance="custom"
>
<div>TODO</div>
<template #skeleton>

</template>
</KSkeletonLoader>
</DocsShowCode>
<!-- eslint-enable -->

</DocsPageSection>
</DocsPageTemplate>

</template>


<script>
import DocsKCard from '../pages-components/DocsKCard';
export default {
name: 'Kskeletonloader',
components: {
DocsKCard,
},
data: function() {
return {
loading: false,
config: {
layout: '1-1-1',
layoutOverride: {},
skeletonsConfig: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
count: 3,
orientation: 'horizontal',
thumbnailDisplay: 'large',
thumbnailAlign: 'left',
height: '250px',
},
{
breakpoints: [3, 4, 5, 6, 7],
height: '180px',
},
],
},
config2: {
layout: '1-1-1',
layoutOverride: {},
skeletonsConfig: [
{
breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
count: 1,
orientation: 'horizontal',
thumbnailDisplay: 'large',
thumbnailAlign: 'left',
height: '250px',
},
{
breakpoints: [3, 4, 5, 6, 7],
height: '180px',
},
],
},
};
},
methods: {
load500() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 500);
},
load1200() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 1200);
},
load4000() {
this.loading = true;
setTimeout(() => {
this.loading = false;
}, 4000);
},
},
};
</script>


<style lang="scss" scoped>
</style>
5 changes: 5 additions & 0 deletions docs/tableOfContents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -448,6 +448,11 @@ export default [
title: 'KFocusTrap',
isCode: true,
}),
new Page({
path: '/kskeletonloader',
title: 'KSkeletonLoader',
isCode: true,
}),
],
}),
];
14 changes: 14 additions & 0 deletions lib/KSkeletonLoader/SkeleletonGeneric.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<template>

<div>TODO</div>

</template>


<script>
export default {
name: 'SkeletonGeneric',
};
</script>
0 lib/cards/SkeletonCard.vue → lib/KSkeletonLoader/SkeletonCard.vue
View file
File renamed without changes.
Loading

0 comments on commit 46ceb1a

Please sign in to comment.