added more loaders

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -13,6 +13,7 @@ import DropdownMenuContent from '../ui/dropdown-menu/DropdownMenuContent.vue';
 import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue';
 import { Calendar } from 'lucide-vue-next';
 import MemberCard from '../members/MemberCard.vue';
+import Spinner from '../ui/spinner/Spinner.vue';
 
 const route = useRoute();
 
@@ -240,7 +241,8 @@ defineExpose({ forceReload })
                     <MapPin :size="20"></MapPin> {{ activeEvent.location || "Unknown" }}
                 </div>
                 <div class="text-foreground/80 flex gap-3 items-center">
-                    <User :size="20"></User> <MemberCard :member-id="activeEvent.creator_id"></MemberCard>
+                    <User :size="20"></User>
+                    <MemberCard :member-id="activeEvent.creator_id"></MemberCard>
                 </div>
             </section>
             <!-- Description -->
@@ -289,4 +291,7 @@ defineExpose({ forceReload })
             </section>
         </div>
     </div>
+    <div v-else class="flex justify-center h-full items-center">
+        <Spinner class="size-8"></Spinner>
+    </div>
 </template>

ui/src/components/members/MemberCard.vue

@@ -8,6 +8,7 @@ import PopoverContent from '../ui/popover/PopoverContent.vue';
 import { cn } from '@/lib/utils.js'
 import { watch } from 'vue';
 import { format } from 'path';
+import Spinner from '../ui/spinner/Spinner.vue';
 
 
 // Props
@@ -91,8 +92,8 @@ function formatDate(date: Date): string {
         </PopoverTrigger>
         <PopoverContent class="w-72 p-0 overflow-hidden">
             <!-- Loading -->
-            <div v-if="loadingFull" class="p-4 text-sm text-muted-foreground">
+            <div v-if="loadingFull" class="p-4 text-sm text-muted-foreground mx-auto flex justify-center my-5">
-                Loading profile…
+                <Spinner></Spinner>
             </div>
 
             <!-- Profile -->

ui/src/pages/Calendar.vue

@@ -217,7 +217,7 @@ onMounted(() => {
             <aside v-if="panelOpen"
                 class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
                 :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
-                <ViewCalendarEvent ref="eventViewRef" @close="() => { router.push('/calendar'); }"
+                <ViewCalendarEvent ref="eventViewRef" :key="currentEventID" @close="() => { router.push('/calendar'); }"
                     @reload="loadEvents()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">
                 </ViewCalendarEvent>
             </aside>