diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index 445a1ee..07234d7 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -51,9 +51,9 @@ onMounted(() => {
 
       <component :is="currentViewComponent" />
 
-      <CalendarSearch />
-      <CalendarDialogUpdateEvent v-if="!isReadOnly" />
-      <CalendarDialogDeleteEvent v-if="!isReadOnly" />
+      <LazyCalendarSearch />
+      <LazyCalendarDialogUpdateEvent v-if="!isReadOnly" />
+      <LazyCalendarDialogDeleteEvent v-if="!isReadOnly" />
     </div>
   </div>
 </template>
diff --git a/components/global/LoadingCard.vue b/components/global/LoadingCard.vue
new file mode 100644
index 0000000..4d8e611
--- /dev/null
+++ b/components/global/LoadingCard.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+const { lineNb = 3 } = defineProps<{
+  lineNb?: number
+}>()
+</script>
+
+<template>
+  <UiCard class="w-full h-full flex flex-col">
+    <UiCardHeader>
+      <UiCardTitle>
+        <UiSkeleton class="w-2/3 max-w-full h-8" />
+      </UiCardTitle>
+    </UiCardHeader>
+    <UiCardContent class="grow grid gap-2">
+      <UiSkeleton class="w-full max-w-full h-6" />
+      <template v-for="(l, i) in lineNb" :key="i">
+        <UiSkeleton class="max-w-full h-6" :style="`width: ${Math.floor(Math.random() * 100) + 1}%`" />
+      </template>
+    </UiCardContent>
+  </UiCard>
+</template>
diff --git a/pages/calendars/[id].vue b/pages/calendars/[id].vue
index 7a2d152..2b523f4 100644
--- a/pages/calendars/[id].vue
+++ b/pages/calendars/[id].vue
@@ -68,21 +68,21 @@ watch(user, () => {
     <div class="grid justify-items-center opacity-80">
       <PhCalendarX size="75" class="opacity-60" />
 
-      <Heading level="h1">
+      <LazyHeading level="h1">
         {{ $t("entity.calendar.notFound") }}
-      </Heading>
+      </LazyHeading>
 
       <p>
         {{ $t('entity.calendar.notFoundDescription') }}
       </p>
 
-      <UiButton variant="default" class="mt-4 gap-2" as-child>
+      <LazyUiButton variant="default" class="mt-4 gap-2" as-child>
         <RouterLink to="/explore">
           <PhArrowBendDoubleUpLeft size="24" />
 
           {{ $t('entity.calendar.backToList') }}
         </RouterLink>
-      </UiButton>
+      </LazyUiButton>
     </div>
   </div>
 </template>
diff --git a/pages/explore.vue b/pages/explore.vue
index b9663d4..b487220 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -5,7 +5,9 @@ definePageMeta({
   middleware: ["reset-menu"]
 })
 
-const { data: availableCalendars } = await useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } })
+const { data: availableCalendars, status: calendarStatus } = await useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } })
+
+const isLoading = computed(() => calendarStatus.value === "pending")
 </script>
 
 <template>
@@ -24,11 +26,14 @@ const { data: availableCalendars } = await useLazyFetch<{ data: Calendar[] }>("/
           {{ $t("entity.calendar.namePublicPlural") }}
         </Heading>
 
-        <ul v-if="availableCalendars?.data" class="grid md:grid-cols-3 gap-2">
-          <li v-for="calendar in availableCalendars.data" :key="calendar.shortId">
-            <CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" />
-          </li>
-        </ul>
+          <div v-if="isLoading" class="grid md:grid-cols-3 gap-2">
+            <LoadingCard />
+          </div>
+          <ul v-else-if="availableCalendars?.data" class="grid md:grid-cols-3 gap-2">
+            <li v-for="calendar in availableCalendars.data" :key="calendar.shortId">
+              <CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" />
+            </li>
+          </ul>
       </Spacing>
     </Spacing>
   </main>
diff --git a/pages/my/index.vue b/pages/my/index.vue
index cac05f0..0af57e6 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -153,8 +153,8 @@ function hideEditModal() {
       </Spacing>
     </section>
 
-    <WorldDialogCreate :modal-state="isCreateWorldModalOpen" @on-close="hideCreateDialog" />
-    <WorldDialogEdit :world="markedWorld" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" />
-    <WorldDialogDelete :world="markedWorld" :modal-state="isDeleteWorldModalOpen" @on-close="hideDeleteModal" />
+    <LazyWorldDialogCreate :modal-state="isCreateWorldModalOpen" @on-close="hideCreateDialog" />
+    <LazyWorldDialogEdit :world="markedWorld" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" />
+    <LazyWorldDialogDelete :world="markedWorld" :modal-state="isDeleteWorldModalOpen" @on-close="hideDeleteModal" />
   </main>
 </template>
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index c26464d..bc29762 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -251,10 +251,10 @@ function hideEditModal() {
         </Spacing>
       </section>
 
-      <WorldDialogEdit :world="world.data" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" />
-      <CalendarDialogCreate :world="world.data" :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" />
-      <CalendarDialogUpdate v-if="markedCalendar?.id" :world="world.data" :calendar="markedCalendar" :modal-state="isUpdateCalendarModalOpen" @on-close="hideUpdateDialog" />
-      <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteCalendarModal"/>
+      <LazyWorldDialogEdit :world="world.data" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" />
+      <LazyCalendarDialogCreate :world="world.data" :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" />
+      <LazyCalendarDialogUpdate v-if="markedCalendar?.id" :world="world.data" :calendar="markedCalendar" :modal-state="isUpdateCalendarModalOpen" @on-close="hideUpdateDialog" />
+      <LazyCalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteCalendarModal"/>
     </template>
     <template v-else>
       <div class="h-full w-full grid place-items-center">