From 060fb915469653f5695c78dcfe88c9333fa624e5 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Fri, 6 Dec 2024 08:39:42 -0500
Subject: [PATCH] feat(web): add loading and error states to notification
 sidebar

---
 web/components/Loading/Bar.vue        | 12 ++++++++++
 web/components/Loading/Spinner.vue    | 19 ++++++++++++++++
 web/components/Notifications/List.vue | 32 ++++++++++++++++++++++-----
 3 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 web/components/Loading/Bar.vue
 create mode 100644 web/components/Loading/Spinner.vue

diff --git a/web/components/Loading/Bar.vue b/web/components/Loading/Bar.vue
new file mode 100644
index 000000000..c5a025fe4
--- /dev/null
+++ b/web/components/Loading/Bar.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '~/components/shadcn/utils';
+
+const props = withDefaults(defineProps<{ class?: string }>(), { class: '' });
+</script>
+<template>
+  <div
+    :class="cn('h-5 animate-pulse bg-gray-300 w-full', props.class)"
+    role="progressbar"
+    aria-label="Loading"
+  />
+</template>
diff --git a/web/components/Loading/Spinner.vue b/web/components/Loading/Spinner.vue
new file mode 100644
index 000000000..144324d7c
--- /dev/null
+++ b/web/components/Loading/Spinner.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '~/components/shadcn/utils';
+
+const props = withDefaults(defineProps<{ class?: string }>(), { class: '' });
+</script>
+<template>
+  <!-- adapted from https://tw-elements.com/docs/standard/components/spinners/ -->
+  <div
+    :class="
+      cn(
+        'inline-block h-8 w-8 animate-spin rounded-full border-2 border-solid border-current border-e-transparent align-[-0.125em] text-primary motion-reduce:animate-[spin_1.5s_linear_infinite]',
+        props.class
+      )
+    "
+    role="status"
+  >
+    <span class="sr-only">Loading...</span>
+  </div>
+</template>
diff --git a/web/components/Notifications/List.vue b/web/components/Notifications/List.vue
index 255069f2c..857db57f2 100644
--- a/web/components/Notifications/List.vue
+++ b/web/components/Notifications/List.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CheckIcon } from '@heroicons/vue/24/solid';
+import { CheckIcon, ShieldExclamationIcon } from '@heroicons/vue/24/solid';
 import { useQuery } from '@vue/apollo-composable';
 import { vInfiniteScroll } from '@vueuse/components';
 import { useFragment } from '~/composables/gql/fragment-masking';
@@ -28,7 +28,7 @@ watch(props, () => {
   canLoadMore.value = true;
 });
 
-const { result, error, fetchMore } = useQuery(getNotifications, () => ({
+const { result, error, loading, fetchMore } = useQuery(getNotifications, () => ({
   filter: {
     offset: 0,
     limit: props.pageSize,
@@ -69,10 +69,6 @@ async function onLoadMore() {
 </script>
 
 <template>
-  <div v-if="notifications?.length === 0" class="h-full flex flex-col items-center justify-center gap-3">
-    <CheckIcon class="h-10 text-green-600" />
-    {{ `No ${props.importance?.toLowerCase() ?? ''} notifications to see here!` }}
-  </div>
   <!-- The horizontal padding here adjusts for the scrollbar offset -->
   <div
     v-if="notifications?.length > 0"
@@ -84,5 +80,29 @@ async function onLoadMore() {
       :key="notification.id"
       v-bind="notification"
     />
+    <div v-if="loading" class="py-5 grid place-content-center">
+      <LoadingSpinner />
+    </div>
+  </div>
+
+  <div v-else class="h-full flex flex-col items-center justify-center gap-3">
+    <!-- Loading State -->
+    <div v-if="loading" class="contents">
+      <LoadingSpinner />
+      <p>Loading Notifications...</p>
+    </div>
+    <!-- Error State -->
+    <div v-else-if="error" class="flex gap-3">
+      <ShieldExclamationIcon class="h-10 text-unraid-red translate-y-1" />
+      <div>
+        <h3 class="font-bold">{{ `Error` }}</h3>
+        <p>{{ error.message }}</p>
+      </div>
+    </div>
+    <!-- Empty State -->
+    <div v-else-if="notifications?.length === 0" class="contents">
+      <CheckIcon class="h-10 text-green-600 translate-y-3" />
+      {{ `No ${props.importance?.toLowerCase() ?? ''} notifications to see here!` }}
+    </div>
   </div>
 </template>