feat: loading skeleton

components/common/CommonPaginator.vue

@@ -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>

components/status/StatusCardSkeleton.vue

@@ -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>

components/timeline/TimelinePaginator.vue

@@ -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>

styles/global.css

@@ -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%
+  }
+}