feat(web): add loading and error states to notification sidebar

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>

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>

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>

web/components/Notifications/List.vue

@@ -28,7 +28,7 @@ watch(props, () => {
   canLoadMore.value = true;
 });
 
-const { result, error, fetchMore } = useQuery(getNotifications, () => ({
+const { result, error, loading, fetchMore, refetch } = 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,15 @@ async function onLoadMore() {
       :key="notification.id"
       v-bind="notification"
     />
+    <div v-if="loading" class="py-5 grid place-content-center">
+      <LoadingSpinner />
+    </div>
   </div>
+
+  <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>
+  </LoadingError>
 </template>