Add empty state for failed fetch

Author: kadiryazici

src/assets/main.scss

@@ -67,4 +67,11 @@ button, a {
   height: 100%;
   border: 1px solid var(--app-border);
   @include borderRadiusOverflowHidden(8px);
+}
+
+.icon {
+  stroke: black;
+  stroke-width: 1px;
+  stroke-linejoin: round;
+  paint-order: stroke;
 }

src/components/AppButton.vue

@@ -1,27 +1,138 @@
+<script lang="ts" setup>
+interface Props {
+  loading?: boolean
+}
+interface Emits {
+  (name: 'click', event: MouseEvent): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+})
+const emit = defineEmits<Emits>()
+
+function handleClick(e: MouseEvent) {
+  if (props.loading)
+    return
+
+  emit('click', e)
+}
+</script>
+
 <template>
-  <button class="button">
-    <slot />
+  <button
+    :disabled="loading || undefined"
+    class="button"
+    :class="{ 'button-loading': loading }"
+    @click="handleClick"
+  >
+    <div
+      v-if="loading"
+      class="button-loading-indicator"
+    >
+      <div class="button-loading-indicator-outer" />
+      <div class="button-loading-indicator-inner" />
+    </div>
+
+    <div class="button-content">
+      <slot />
+    </div>
   </button>
 </template>
 
 <style lang="scss" scoped>
 .button {
+  height: 35px;
   font-size: 14px;
   padding: 8px 12px;
   border: 1px solid var(--item-border-color);
   outline: none;
   background-color: var(--item-bg);
+  position: relative;
+  overflow: hidden;
   color: var(--white);
   border-radius: 8px;
-  @include focus-visible;
   @include text-outline();
 
-  &:active {
-    background-color: var(--item-hover-bg);
+  &-loading {
+    .button-content {
+      opacity: 0;
+    }
+  }
+
+  &:not(.button-loading) {
+    @include focus-visible;
+
+    &:active {
+      background-color: var(--item-hover-bg);
+    }
+
+    &:hover {
+      border-color: var(--item-hover-bg);;
+    }
+  }
+}
+
+.button-loading-indicator {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+
+  $animation-cubic-bezier: cubic-bezier(.57,-0.66,.48,1.66);
+
+  &-inner {
+    animation: .75s button-loading-inner-anim $animation-cubic-bezier infinite alternate-reverse;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--white);
+    position: relative;
+  }
+
+  &-outer {
+    animation: 1.5s button-loading-outer-anim $animation-cubic-bezier infinite;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    border: 2px solid var(--app-border);
+  }
+}
+
+@keyframes button-loading-outer-anim {
+  0% {
+    transform: scale(0.25);
+    opacity: 1;
+  }
+
+  25% {
+    opacity: 1;
+  }
+
+  50%,
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+@keyframes button-loading-inner-anim {
+  0% {
+    transform: scale(1);
   }
 
-  &:hover {
-    border-color: var(--item-hover-bg);;
+  100% {
+    transform: scale(0.5);
   }
 }
 </style>

src/components/EmptyState.vue

@@ -1 +1,68 @@
-<template />
+<script lang="ts">
+import type { Option } from '../types'
+import { type IconComponent } from './Icons'
+import PageHeader from './PageHeader.vue'
+
+export enum EmptyStateIconSize {
+  Regular,
+  Big,
+}
+</script>
+
+<script lang="ts" setup>
+interface Props {
+  icon?: Option<IconComponent>
+  description: string
+  iconSize?: Option<EmptyStateIconSize>
+}
+withDefaults(defineProps<Props>(), {
+  iconSize: EmptyStateIconSize.Regular,
+})
+</script>
+
+<template>
+  <div class="empty-state">
+    <Component
+      :is="icon"
+      v-if="icon != null"
+      class="empty-state-icon"
+      :class="{ 'empty-state-icon-big': iconSize === EmptyStateIconSize.Big }"
+    />
+
+    <PageHeader>
+      {{ description }}
+    </PageHeader>
+
+    <div class="empty-state-footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.empty-state {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  padding: 25px;
+  align-items: center;
+  justify-content: center;
+
+  &-footer {
+    width: 100%;
+    text-align: center;
+    margin-top: 15px;
+  }
+
+  &-icon {
+    font-size: 30px;
+    color: var(--white);
+    margin-bottom: 15px;
+
+    &-big {
+      font-size: 50px;
+    }
+  }
+}
+</style>

src/components/Icons.ts

@@ -25,6 +25,8 @@ import MailIcon from 'virtual:icons/octicon/mail-24'
 import SignOutIcon16 from 'virtual:icons/octicon/sign-out-16'
 import ChevronLeftIcon from 'virtual:icons/octicon/chevron-left'
 
+export type IconComponent = typeof Icons[keyof typeof Icons]
+
 export const Icons = {
   More: markRaw(MoreIcon),
   Gear: markRaw(GearIcon),

src/components/SidebarButton.vue

@@ -48,10 +48,6 @@ const props = withDefaults(defineProps<Props>(), {
 
   :deep(.icon) {
     font-size: 16px;
-    stroke: black;
-    stroke-width: 1px;
-    stroke-linejoin: round;
-    paint-order: stroke;
   }
 }
 </style>

src/pages/HomePage.vue

@@ -14,6 +14,9 @@ import NotificationSkeleton from '../components/NotificationSkeleton.vue'
 import { Page } from '../constants'
 import type { Option } from '../types'
 import { useElementNavigation } from '../composables/useElementNavigation'
+import EmptyState, { EmptyStateIconSize } from '../components/EmptyState.vue'
+import { Icons } from '../components/Icons'
+import AppButton from '../components/AppButton.vue'
 
 const store = useStore()
 
@@ -46,6 +49,26 @@ useElementNavigation({
   >
     <NotificationSkeleton v-if="store.skeletonVisible" />
 
+    <EmptyState
+      v-else-if="store.failedLoadingNotifications"
+      :iconSize="EmptyStateIconSize.Big"
+      :icon="Icons.X"
+      description="Oopsie! Couldn't load notifications."
+    >
+      <template #footer>
+        <AppButton @click="store.fetchNotifications(true)">
+          Refresh
+        </AppButton>
+      </template>
+    </EmptyState>
+
+    <EmptyState
+      v-else-if="store.notifications.length === 0"
+      :iconSize="EmptyStateIconSize.Big"
+      :icon="Icons.Check"
+      description="It's all clear sir!"
+    />
+
     <template v-else>
       <NotificationList
         v-for="notification of store.notifications"

src/pages/LandingPage.vue

@@ -11,6 +11,7 @@ import { getAccessToken } from '../api/token'
 import { GITHUB_AUTH_URL } from '../api/constants'
 import { AppStorage } from '../storage'
 import { getUser } from '../api/user'
+import EmptyState from '../components/EmptyState.vue'
 
 const store = useStore()
 
@@ -46,43 +47,14 @@ function handleLogin() {
 </script>
 
 <template>
-  <div class="landing">
-    <Icons.Github class="github-icon" />
-
-    <PageHeader class="landing-header">
-      Welcome to Gitification
-    </PageHeader>
-
-    <div class="landing-content">
+  <EmptyState
+    :icon="Icons.Github"
+    description="Welcome to Gitification"
+  >
+    <template #footer>
       <AppButton @click="handleLogin">
         Log in via Github
       </AppButton>
-    </div>
-  </div>
+    </template>
+  </EmptyState>
 </template>
-
-<style lang="scss" scoped>
-.landing {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-flow: column nowrap;
-  padding: 25px;
-  align-items: center;
-  justify-content: center;
-
-  &-header {
-    margin: 15px 0;
-  }
-
-  &-content {
-    width: 100%;
-    text-align: center;
-  }
-
-  .github-icon {
-    font-size: 30px;
-    color: var(--white);
-  }
-}
-</style>

src/stores/store.ts

@@ -9,6 +9,7 @@ import { notificationListFromThreads } from '../utils/notification'
 export const useStore = defineStore('store', () => {
   const notifications = ref<NotificationListData[]>([])
   const loadingNotifications = ref(false)
+  const failedLoadingNotifications = ref(false)
   const skeletonVisible = ref(false)
 
   async function fetchNotifications(withSkeletons = false) {
@@ -24,6 +25,7 @@ export const useStore = defineStore('store', () => {
       skeletonVisible.value = true
 
     loadingNotifications.value = true
+    failedLoadingNotifications.value = false
 
     try {
       const { data } = await getNotifications({
@@ -37,6 +39,7 @@ export const useStore = defineStore('store', () => {
     catch (error) {
       console.error('NotificationError: ', error)
       notifications.value = []
+      failedLoadingNotifications.value = true
     }
     finally {
       loadingNotifications.value = false
@@ -68,6 +71,7 @@ export const useStore = defineStore('store', () => {
     loadingNotifications,
     skeletonVisible,
     pageFrom,
+    failedLoadingNotifications,
     fetchNotifications,
     logout,
   }