add loading tip

floyd-li · Apr 10, 2023 · 63f3944 · 63f3944
1 parent 9e1eef1
commit 63f3944
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/components/common/NotificationBox/NotificationBoxModal.vue b/components/common/NotificationBox/NotificationBoxModal.vue
@@ -88,15 +88,20 @@
           </div>
         </div>
       </div>
-      <div v-if="displayedEvents.length === 0" class="empty-tip">
-        <p>{{ $t('notification.emptyTipLine1') }}</p>
-        <p>{{ $t('notification.emptyTipLine2') }}</p>
+      <div v-if="loading" class="empty-tip">
+        <p>{{ $t('notification.loadingTip') }}</p>
       </div>
-      <div v-else class="is-flex is-flex-direction-column">
-        <NotificationItem
-          v-for="(event, index) in displayedEvents"
-          :key="`${event.id}-${index}`"
-          :event="event" />
+      <div v-else>
+        <div v-if="allEvents.length === 0" class="empty-tip">
+          <p>{{ $t('notification.emptyTipLine1') }}</p>
+          <p>{{ $t('notification.emptyTipLine2') }}</p>
+        </div>
+        <div v-else class="is-flex is-flex-direction-column">
+          <NotificationItem
+            v-for="(event, index) in displayedEvents"
+            :key="`${event.id}-${index}`"
+            :event="event" />
+        </div>
       </div>
     </div>
   </div>
@@ -124,7 +129,7 @@ const eventFilter = ref<string[]>([])
 const showFilter = ref(false)
 const emit = defineEmits(['close'])
 
-const { collections, events: allEvents } = useNotification()
+const { collections, events: allEvents, loading } = useNotification()
 
 const toggleCollectionFilter = (target: FilterOption) => {
   if (collectionFilter.value?.id === target.id) {

diff --git a/components/common/NotificationBox/useNotification.ts b/components/common/NotificationBox/useNotification.ts
@@ -48,7 +48,7 @@ export const useNotification = () => {
       account: accountId.value,
     },
   })
-  const { data: eventData } = useGraphql({
+  const { data: eventData, loading } = useGraphql({
     queryPrefix:
       urlPrefix.value === 'bsx' || urlPrefix.value === 'snek'
         ? 'chain-bsx'
@@ -86,5 +86,6 @@ export const useNotification = () => {
   return {
     collections,
     events,
+    loading,
   }
 }
diff --git a/locales/en.json b/locales/en.json
@@ -1311,6 +1311,7 @@
     "byCollection": "By collection",
     "byEvent": "By event",
     "emptyTipLine1": "Don't wait for notifications,",
-    "emptyTipLine2": "make your own buzz with your art."
+    "emptyTipLine2": "make your own buzz with your art.",
+    "loadingTip": "Loading Your Notifications..."
   }
 }