diff --git a/pages/calendars/[id].vue b/pages/calendars/[id].vue
index 95d527a..29f0786 100644
--- a/pages/calendars/[id].vue
+++ b/pages/calendars/[id].vue
@@ -8,8 +8,29 @@ const shortId = route.params.id
 
 const user = useSupabaseUser()
 
-const { data: calendarData, pending: calPending, refresh: calRefresh } = await useLazyFetch<{ data: Calendar }>("/api/calendars/query", { query: { shortId, full: true } })
-const { data: catData, pending: catPending, refresh: catRefresh } = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query")
+const {
+  data: calendar,
+  status: calendarStatus,
+  refresh: calRefresh
+} = await useLazyFetch<{ data: Calendar }>("/api/calendars/query",
+  {
+    key: `calendar-${shortId}`,
+    query: {
+      shortId,
+      full: true
+    }
+  }
+)
+
+const {
+  data: categories,
+  status: categoriesStatus,
+  refresh: catRefresh
+} = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query",
+  { key: `categories-${shortId}` }
+)
+
+const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
 
 watch(user, () => {
   calRefresh()
@@ -18,7 +39,7 @@ watch(user, () => {
 </script>
 
 <template>
-  <div v-if="calPending || catPending" class="h-full w-full grid place-items-center">
+  <div v-if="isLoading" class="h-full w-full grid place-items-center">
     <Head>
       <Title>{{ $t("entity.calendar.nameSingular") }}</Title>
     </Head>
@@ -31,12 +52,12 @@ watch(user, () => {
     </div>
   </div>
 
-  <div v-else-if="calendarData && catData" class="h-full w-full">
+  <div v-else-if="calendar && categories" class="h-full w-full">
     <Head>
-      <Title>{{ calendarData.data.name }}</Title>
+      <Title>{{ calendar.data.name }}</Title>
     </Head>
 
-    <Calendar :calendar-data="calendarData.data" :categories="catData.data" />
+    <Calendar :calendar-data="calendar.data" :categories="categories.data" />
   </div>
 
   <div v-else class="h-full w-full grid place-items-center">
diff --git a/pages/my/calendars/[id].vue b/pages/my/calendars/[id].vue
index 4e7c657..2ac88a0 100644
--- a/pages/my/calendars/[id].vue
+++ b/pages/my/calendars/[id].vue
@@ -8,6 +8,7 @@ definePageMeta({
 })
 
 const user = useSupabaseUser()
+
 // Redirect user back home when they log out on the page
 watch(user, (n) => {
   if (!n) {
@@ -18,15 +19,31 @@ watch(user, (n) => {
 const route = useRoute()
 const id = route.params.id
 
-const { data: calendarData, pending: calPending } = await useLazyFetch("/api/calendars/query", { key: `calendar-${id}`, query: { id, full: true } })
-const { data: catData, pending: catPending } = await useLazyFetch("/api/calendars/categories/query", { key: `categories-${id}` })
+const {
+  data: calendar,
+  status: calendarStatus
+} = await useLazyFetch<{ data: Calendar }>("/api/calendars/query",
+  {
+    key: `calendar-${id}`,
+    query: {
+      id,
+      full: true
+    }
+  }
+)
 
-const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
-const categories = computed<Category[]>(() => catData?.value?.data as Category[])
+const {
+  data: categories,
+  status: categoriesStatus
+} = await useLazyFetch<{ data: Category[] }>("/api/calendars/categories/query",
+  { key: `categories-${id}` }
+)
+
+const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
 </script>
 
 <template>
-  <div v-if="calPending || catPending" class="h-full w-full grid place-items-center">
+  <div v-if="isLoading" class="h-full w-full grid place-items-center">
     <Head>
       <Title>{{ $t("entity.calendar.nameSingular") }}</Title>
     </Head>
@@ -39,11 +56,11 @@ const categories = computed<Category[]>(() => catData?.value?.data as Category[]
     </div>
   </div>
 
-  <div v-else-if="cal && categories" class="h-full w-full">
+  <div v-else-if="calendar && categories" class="h-full w-full">
     <Head>
-      <Title>{{ cal.name }}</Title>
+      <Title>{{ calendar.data.name }}</Title>
     </Head>
 
-    <Calendar :calendar-data="cal" :categories />
+    <Calendar :calendar-data="calendar.data" :categories="categories.data" />
   </div>
 </template>
