From 77a87af46a2a13ab372e338e95c7c0f850c2a90a Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 13:02:19 +0800
Subject: [PATCH] feat: loading skeleton

---
 components/common/CommonPaginator.vue     | 10 ++++++----
 components/status/StatusCardSkeleton.vue  | 15 +++++++++++++++
 components/timeline/TimelinePaginator.vue |  6 ++++++
 styles/global.css                         | 15 +++++++++++++++
 4 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 components/status/StatusCardSkeleton.vue

diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index fbe286c6..f4e3d4a9 100644
--- a/components/common/CommonPaginator.vue
+++ b/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>
-      <div text-secondary i-ri:loader-2-fill animate-spin text-2xl />
-      <span text-secondary>Loading...</span>
-    </div>
+    <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>
diff --git a/components/status/StatusCardSkeleton.vue b/components/status/StatusCardSkeleton.vue
new file mode 100644
index 00000000..c623de75
--- /dev/null
+++ b/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>
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index 520b8c25..fb21e17b 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/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>
diff --git a/styles/global.css b/styles/global.css
index cc1ab03a..c23ad6c0 100644
--- a/styles/global.css
+++ b/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%
+  }
+}