fix(kskeleton): delay-milliseconds default to 0

Kong · Apr 19, 2022 · 7ffa180 · 7ffa180
1 parent bf3ce44
commit 7ffa180
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 14 deletions.
diff --git a/TEMP-MIGRATION-CHANGELOG.md b/TEMP-MIGRATION-CHANGELOG.md
@@ -100,6 +100,7 @@ export default defineConfig({
 
 ### KSkeleton
 - Renamed internal component from `Skeleton` to `SkeletonBase`
+- `delayMilliseconds` prop defaults to `0`
 
 ### KPrompt
 

diff --git a/docs/components/skeleton.md b/docs/components/skeleton.md
@@ -18,15 +18,15 @@ There are 5 different types of loading states that KSkeleton supports: Card, Tab
 
 ### delayMilliseconds
 
-The number of milliseconds to wait before showing the skeleton state. Defaults to 750.
+The number of milliseconds to wait before showing the skeleton state. Defaults to `0`.
 
 <KComponent :data="{ isLoading: false }" v-slot="{ data }">
   <div>
     <KButton class="mb-2" @click="()=>(data.isLoading=!data.isLoading)">Toggle loading - {{data.isLoading?'on':'off'}}</KButton>
       <div v-if="!data.isLoading">
         <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
       </div>
-      <KSkeleton v-else="data.isLoading" />
+      <KSkeleton v-else="data.isLoading" delay-milliseconds="200" />
   </div>
 </KComponent>
 
@@ -37,7 +37,7 @@ The number of milliseconds to wait before showing the skeleton state. Defaults t
       <div v-if="!data.isLoading">
         <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
       </div>
-      <KSkeleton v-else="data.isLoading" />
+      <KSkeleton v-else="data.isLoading" delay-milliseconds="200" />
   </div>
 </KComponent>
 ```

diff --git a/src/components/KSkeleton/KSkeleton.spec.ts b/src/components/KSkeleton/KSkeleton.spec.ts
@@ -7,11 +7,7 @@ import KSkeleton from '@/components/KSkeleton/KSkeleton.vue'
 describe('KSkeleton', () => {
   describe('variants', () => {
     it('renders generic skeleton state by default', () => {
-      mount(KSkeleton, {
-        props: {
-          delayMilliseconds: 0,
-        },
-      })
+      mount(KSkeleton)
 
       cy.get('.skeleton-loader').should('exist')
     })
@@ -20,7 +16,6 @@ describe('KSkeleton', () => {
       mount(KSkeleton, {
         props: {
           type: 'form',
-          delayMilliseconds: 0,
         },
       })
 
@@ -33,7 +28,6 @@ describe('KSkeleton', () => {
         props: {
           type: 'card',
           cardCount: 2,
-          delayMilliseconds: 0,
         },
       })
 
@@ -45,7 +39,6 @@ describe('KSkeleton', () => {
       mount(KSkeleton, {
         props: {
           type: 'table',
-          delayMilliseconds: 0,
         },
       })
 
@@ -57,7 +50,6 @@ describe('KSkeleton', () => {
       mount(KSkeleton, {
         props: {
           type: 'spinner',
-          delayMilliseconds: 0,
         },
       })
 
@@ -68,7 +60,6 @@ describe('KSkeleton', () => {
       mount(KSkeleton, {
         props: {
           type: 'fullscreen-kong',
-          delayMilliseconds: 0,
         },
       })
 

diff --git a/src/components/KSkeleton/KSkeleton.vue b/src/components/KSkeleton/KSkeleton.vue
@@ -62,7 +62,7 @@ export default defineComponent({
     delayMilliseconds: {
       type: Number,
       required: false,
-      default: 750,
+      default: 0,
     },
     type: {
       type: String,