From bf8b7d6f80aa490047cae465af9c65dd1709cf20 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 1/2] 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 0000000000..c5a025fe4a
--- /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 0000000000..144324d7c7
--- /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 255069f2c3..857db57f2c 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>

From 358495e436140792c600938353e228cfe7fe997c Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Fri, 6 Dec 2024 11:15:46 -0500
Subject: [PATCH 2/2] refactor(web): add container for loading & error states

---
 web/components/Loading/Error.vue      | 55 +++++++++++++++++++++++++++
 web/components/Notifications/List.vue | 24 +++---------
 2 files changed, 60 insertions(+), 19 deletions(-)
 create mode 100644 web/components/Loading/Error.vue

diff --git a/web/components/Loading/Error.vue b/web/components/Loading/Error.vue
new file mode 100644
index 0000000000..ff79ab312b
--- /dev/null
+++ b/web/components/Loading/Error.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ShieldExclamationIcon } from '@heroicons/vue/24/solid';
+import { cn } from '~/components/shadcn/utils';
+
+/**
+ * A default container for displaying loading and error states.
+ * 
+ * By default, this component will expand to full height and display contents
+ * in the center of the container.
+ * 
+ * Any slot/child will only render when a loading/error state isn't displayed.
+ * 
+ * Exposes a 'retry' event (user-triggered during error state).
+ * 
+ * @example
+ * <LoadingError @retry="retryFunction" :loading="loading" :error="error" />
+ * 
+ * <LoadingError :loading="loading" :error="error">
+ *     <p>Only displayed when both loading and error are false.</p>
+ * </LoadingError>
+ */
+const props = withDefaults(
+  defineProps<{
+    class?: string;
+    /** hasdfsa */
+    loading: boolean;
+    error: Error | null | undefined;
+  }>(),
+  { class: '' }
+);
+
+defineEmits(['retry']);
+</script>
+<template>
+  <div :class="cn('h-full flex flex-col items-center justify-center gap-3', props.class)">
+    <!-- Loading State -->
+    <div v-if="loading" class="contents">
+      <LoadingSpinner />
+      <p>Loading Notifications...</p>
+    </div>
+    <!-- Error State -->
+    <div v-else-if="error" class="space-y-3">
+      <div class="flex justify-center">
+        <ShieldExclamationIcon class="h-10 text-unraid-red" />
+      </div>
+      <div>
+        <h3 class="font-bold">{{ `Error` }}</h3>
+        <p>{{ error.message }}</p>
+      </div>
+      <Button type="button" class="w-full" @click="$emit('retry')">Try Again</Button>
+    </div>
+    <!-- Default state -->
+    <slot v-else />
+  </div>
+</template>
diff --git a/web/components/Notifications/List.vue b/web/components/Notifications/List.vue
index 857db57f2c..013a7b162f 100644
--- a/web/components/Notifications/List.vue
+++ b/web/components/Notifications/List.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CheckIcon, ShieldExclamationIcon } from '@heroicons/vue/24/solid';
+import { CheckIcon } 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, loading, fetchMore } = useQuery(getNotifications, () => ({
+const { result, error, loading, fetchMore, refetch } = useQuery(getNotifications, () => ({
   filter: {
     offset: 0,
     limit: props.pageSize,
@@ -85,24 +85,10 @@ async function onLoadMore() {
     </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">
+  <LoadingError v-else :loading="loading" :error="error" @retry="refetch">
+    <div v-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>
+  </LoadingError>
 </template>