Add spin anim to sync icon on loading

Author: kadiryazici

src/components/AppSidebar.vue

@@ -35,7 +35,7 @@ function handleBack() {
         v-if="accessToken != null"
         @click="store.fetchNotifications(true)"
       >
-        <Icons.Sync16 />
+        <Icons.Sync16 :class="{ 'sync-icon-spin': store.loadingNotifications }" />
       </SidebarButton>
 
       <SidebarButton @click="store.setPage(Page.Settings)">
@@ -46,6 +46,14 @@ function handleBack() {
 </template>
 
 <style lang="scss" scoped>
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 .nav {
   height: 100%;
   flex-shrink: 0;
@@ -55,6 +63,10 @@ function handleBack() {
   padding: 10px;
   background-color: var(--sidebar-bg);
 
+  .sync-icon-spin {
+    animation: 1s spin linear infinite;
+  }
+
   .upper,
   .lower {
     display: flex;
@@ -70,6 +82,5 @@ function handleBack() {
   .lower {
     margin-top: auto;
   }
-
 }
 </style>

src/components/EmptyState.vue

@@ -0,0 +1 @@
+<template />

src/stores/store.ts

@@ -23,6 +23,8 @@ export const useStore = defineStore('store', () => {
     if (withSkeletons)
       skeletonVisible.value = true
 
+    loadingNotifications.value = true
+
     try {
       const { data } = await getNotifications({
         accessToken,
@@ -31,12 +33,15 @@ export const useStore = defineStore('store', () => {
       })
 
       notifications.value = notificationListFromThreads(data)
-      skeletonVisible.value = false
     }
     catch (error) {
       console.error('NotificationError: ', error)
       notifications.value = []
     }
+    finally {
+      loadingNotifications.value = false
+      skeletonVisible.value = false
+    }
   }
 
   const currentPage = ref(Page.Landing)