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

10
components/common/CommonPaginator.vue
View File

@ -27,10 +27,12 @@ const { items, state, endAnchor, error } = usePaginator(paginator)
/> />
</template> </template>
<div ref="endAnchor" /> <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 text-secondary i-ri:loader-2-fill animate-spin text-2xl /> <div p5 text-center flex="~ col" items-center animate-pulse>
<span text-secondary>Loading...</span> <div text-secondary i-ri:loader-2-fill animate-spin text-2xl />
</div> <span text-secondary>Loading...</span>
</div>
</slot>
<div v-else-if="state === 'done'" p5 text-secondary italic text-center> <div v-else-if="state === 'done'" p5 text-secondary italic text-center>
End of the list End of the list
</div> </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"> <script setup lang="ts">
// @ts-expect-error missing types
import { DynamicScrollerItem } from 'vue-virtual-scroller' import { DynamicScrollerItem } from 'vue-virtual-scroller'
import type { Paginator, Status } from 'masto' import type { Paginator, Status } from 'masto'
@ -17,5 +18,10 @@ const { paginator } = defineProps<{
/> />
</DynamicScrollerItem> </DynamicScrollerItem>
</template> </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> </CommonPaginator>
</template> </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%
}
}