CloudToys/elk
1
0
Fork 0
Code

feat: use timeline skeleton as default instead of spinner

Browse Source
This commit is contained in:
patak 2022-12-30 16:34:23 +01:00
parent ca37b65962
commit 5a4ec04661
3 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/common/CommonPaginator.vue
View File

@ -70,10 +70,7 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
</slot> </slot>
<div ref="endAnchor" /> <div ref="endAnchor" />
<slot v-if="state === 'loading'" name="loading"> <slot v-if="state === 'loading'" name="loading">
<div p5 text-center flex="~ col" items-center animate-pulse> <TimelineSkeleton />
<div text-secondary i-ri:loader-2-fill animate-spin text-2xl />
<span text-secondary>{{ $t('state.loading') }}</span>
</div>
</slot> </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>
{{ $t('common.end_of_list') }} {{ $t('common.end_of_list') }}

5
components/timeline/TimelinePaginator.vue
View File

@ -31,10 +31,5 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
<StatusCard :status="item" :context="context" :older="older" :newer="newer" /> <StatusCard :status="item" :context="context" :older="older" :newer="newer" />
</template> </template>
</template> </template>
<template #loading>
<StatusCardSkeleton border="b base" />
<StatusCardSkeleton border="b base" op50 />
<StatusCardSkeleton border="b base" op25 />
</template>
</CommonPaginator> </CommonPaginator>
</template> </template>

8
components/timeline/TimelineSkeleton.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<div>
<StatusCardSkeleton border="b base" op50 />
<StatusCardSkeleton border="b base" op35 />
<StatusCardSkeleton border="b base" op25 />
<StatusCardSkeleton border="b base" op10 />
</div>
</template>