zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: loading skeleton

zio/stable
Anthony Fu 2022-11-27 13:02:19 +08:00
parent 1bd710daa4
commit 77a87af46a
4 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/common/CommonPaginator.vue
View File

@ -27,10 +27,12 @@ const { items, state, endAnchor, error } = usePaginator(paginator)
/>
</template>
<div ref="endAnchor" />
<div v-if="state === 'loading'" p5 text-center flex="~ col" items-center animate-pulse>
<slot v-if="state === 'loading'" name="loading">
<div p5 text-center flex="~ col" items-center animate-pulse>
<div text-secondary i-ri:loader-2-fill animate-spin text-2xl />
<span text-secondary>Loading...</span>
</div>
</slot>
<div v-else-if="state === 'done'" p5 text-secondary italic text-center>
End of the list
</div>

15
components/status/StatusCardSkeleton.vue 100644
View File

@ -0,0 +1,15 @@
<template>
<div flex flex-col gap-2 px-4>
<div flex gap-4>
<div>
<div w-12 h-12 rounded-full class="skeleton-loading-bg" />
</div>
<div flex="~ col 1 gap-2" pb2 min-w-0>
<div flex class="skeleton-loading-bg" h-5 w-20 rounded />
<div flex class="skeleton-loading-bg" h-4 w-full rounded />
<div flex class="skeleton-loading-bg" h-4 w="4/5" rounded />
<div flex class="skeleton-loading-bg" h-4 w="2/5" rounded />
</div>
</div>
</div>
</template>

6
components/timeline/TimelinePaginator.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
// @ts-expect-error missing types
import { DynamicScrollerItem } from 'vue-virtual-scroller'
import type { Paginator, Status } from 'masto'
@ -17,5 +18,10 @@ const { paginator } = defineProps<{
/>
</DynamicScrollerItem>
</template>
<template #loading>
<StatusCardSkeleton border="b base" py-3 />
<StatusCardSkeleton border="b base" py-3 op50 />
<StatusCardSkeleton border="b base" py-3 op25 />
</template>
</CommonPaginator>
</template>

15
styles/global.css
View File

@ -88,3 +88,18 @@ html {
}
}
}
.skeleton-loading-bg {
background: linear-gradient(90deg,rgba(190,190,190,.2) 25%,rgba(129,129,129,.24) 37%,rgba(190,190,190,.2) 63%);
background-size: 400% 100%;
animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
0% {
background-position: 100% 50%
}
to {
background-position: 0 50%
}
}