From 38f5d7155f717e0022ec04f1f4253278eb3303ed Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 21 Nov 2022 04:32:20 +0800
Subject: [PATCH] chore: loading indicator

---
 components/common/CommonPaginator.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index a6a2d991..4b199d34 100644
--- a/components/common/CommonPaginator.vue
+++ b/components/common/CommonPaginator.vue
@@ -17,13 +17,14 @@ const { items, state, endAnchor, error } = usePaginator(paginator)
       :item="item"
     />
     <div ref="endAnchor" />
-    <div v-if="state === 'loading'" p5 color-gray-5>
-      Loading...
+    <div v-if="state === 'loading'" p5 text-center flex="~ col" items-center animate-pulse>
+      <div op50 i-ri:loader-2-fill animate-spin text-2xl />
+      <span op50>Loading...</span>
     </div>
-    <div v-else-if="state === 'done'" p5 color-gray>
-      End of list
+    <div v-else-if="state === 'done'" p5 op50 italic text-center>
+      End of the list
     </div>
-    <div v-else-if="state === 'error'" p5 color-gray>
+    <div v-else-if="state === 'error'" p5 op50>
       ERROR: {{ error }}
     </div>
   </div>