From 5a4ec046616872231a9c5107e0611b76f6be5f79 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Fri, 30 Dec 2022 16:34:23 +0100
Subject: [PATCH] feat: use timeline skeleton as default instead of spinner

---
 components/common/CommonPaginator.vue     | 5 +----
 components/timeline/TimelinePaginator.vue | 5 -----
 components/timeline/TimelineSkeleton.vue  | 8 ++++++++
 3 files changed, 9 insertions(+), 9 deletions(-)
 create mode 100644 components/timeline/TimelineSkeleton.vue

diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index 19197029..ec86a5fa 100644
--- a/components/common/CommonPaginator.vue
+++ b/components/common/CommonPaginator.vue
@@ -70,10 +70,7 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
     </slot>
     <div ref="endAnchor" />
     <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>{{ $t('state.loading') }}</span>
-      </div>
+      <TimelineSkeleton />
     </slot>
     <div v-else-if="state === 'done'" p5 text-secondary italic text-center>
       {{ $t('common.end_of_list') }}
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index 8c5831f5..0a65fbb7 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/components/timeline/TimelinePaginator.vue
@@ -31,10 +31,5 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
         <StatusCard :status="item" :context="context" :older="older" :newer="newer" />
       </template>
     </template>
-    <template #loading>
-      <StatusCardSkeleton border="b base" />
-      <StatusCardSkeleton border="b base" op50 />
-      <StatusCardSkeleton border="b base" op25 />
-    </template>
   </CommonPaginator>
 </template>
diff --git a/components/timeline/TimelineSkeleton.vue b/components/timeline/TimelineSkeleton.vue
new file mode 100644
index 00000000..b5dc01cf
--- /dev/null
+++ b/components/timeline/TimelineSkeleton.vue
@@ -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>