From db00a81ff9815221d75a40c29c8155d6a18f8a70 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Mon, 2 Dec 2024 17:22:43 +0100
Subject: [PATCH] feat: :sparkles: Add loader to timelines

---
 components/modals/confirm.vue          | 2 --
 components/timelines/timeline-item.vue | 1 -
 components/timelines/timeline.vue      | 6 ++++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/modals/confirm.vue b/components/modals/confirm.vue
index 4696d14..0479a60 100644
--- a/components/modals/confirm.vue
+++ b/components/modals/confirm.vue
@@ -11,9 +11,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { ref } from "vue";
 import {
     type ConfirmModalOptions,
     type ConfirmModalResult,
diff --git a/components/timelines/timeline-item.vue b/components/timelines/timeline-item.vue
index 388c9a8..9373171 100644
--- a/components/timelines/timeline-item.vue
+++ b/components/timelines/timeline-item.vue
@@ -5,7 +5,6 @@
 
 <script lang="ts" setup>
 import type { Notification, Status } from "@versia/client/types";
-import { computed } from "vue";
 import Note from "../notes/note.vue";
 import NotificationItem from "../notifications/notification.vue";
 
diff --git a/components/timelines/timeline.vue b/components/timelines/timeline.vue
index 294a1d1..a91d454 100644
--- a/components/timelines/timeline.vue
+++ b/components/timelines/timeline.vue
@@ -7,7 +7,9 @@
                 @delete="removeItem" />
         </TransitionGroup>
 
-        <!-- <TimelineItem v-if="isLoading" :type="type" v-for="_ in 5" /> -->
+        <div v-if="isLoading" class="p-4 flex items-center justify-center h-48">
+            <Loader class="size-8 animate-spin" />
+        </div>
 
         <div v-if="error" class="timeline-error">
             {{ error.message }}
@@ -46,7 +48,7 @@
 <script lang="ts" setup>
 import type { Notification, Status } from "@versia/client/types";
 import { useIntersectionObserver } from "@vueuse/core";
-import { onMounted, watch } from "vue";
+import { Loader } from "lucide-vue-next";
 import {
     Card,
     CardDescription,