Loading Events

public/js/components/Calendar/Mode/Day/View.js

@@ -63,9 +63,14 @@ export default {
 				if (this.events.find(e => e == this.chosenEvent))
 					return this.chosenEvent;
 			}
+			let first = null;
 			if (this.events)
-				return this.events.find(Boolean); // undefined => none found
-			return null; // null => loading
+				first = this.events.find(Boolean); // undefined => none found
+
+			if (first && first.type == 'loading')
+				return null; // null => loading
+
+			return first;
 		}
 	},
 	watch: {
@@ -123,7 +128,10 @@ export default {
 				<label-time v-bind="{ part }" />
 			</template>
 			<template #event="slot">
-				<slot v-bind="slot" mode="day" />
+				<div v-if="slot.event.type == 'loading'" class="placeholder-glow h-100 opacity-50">
+					<span class="placeholder w-100 h-100" />
+				</div>
+				<slot v-else v-bind="slot" mode="day" />
 			</template>
 		</calendar-grid>
 		<Teleport :disabled="!gridMainRef" :to="gridMainRef">

public/js/components/Calendar/Mode/List/View.js

@@ -53,7 +53,10 @@ export default {
 		<div v-for="{ day, events } in eventsPerDay" class="text-center">
 			<label-dow :date="day" class="d-inline" />, <label-day :date="day" class="d-inline" />
 			<div v-for="event in events">
-				<slot :event="event.orig" mode="list" />
+ 				<div v-if="slot.event.type == 'loading'" class="placeholder-glow opacity-50">
+					<span class="placeholder w-100" />
+				</div>
+				<slot v-else :event="event.orig" mode="list" />
 			</div>
 		</div>
 	</div>

public/js/components/Calendar/Mode/Month/View.js

@@ -78,6 +78,9 @@ export default {
 					:date="slot.event.start"
 					:class="{ disabled: day.month != slot.event.start.month }"
 				/>
+				<div v-else-if="slot.event.type == 'loading'" class="placeholder-glow opacity-50">
+					<span class="placeholder w-100 fs-1" />
+				</div>
 				<slot v-else v-bind="slot" />
 			</template>
 		</calendar-grid>

public/js/components/Calendar/Mode/Week/View.js

@@ -66,7 +66,10 @@ export default {
 				<label-time v-bind="{ part }" />
 			</template>
 			<template #event="slot">
-				<slot v-bind="slot" />
+				<div v-if="slot.event.type == 'loading'" class="placeholder-glow h-100 opacity-50">
+					<span class="placeholder w-100 h-100" />
+				</div>
+				<slot v-else v-bind="slot" />
 			</template>
 		</calendar-grid>
 	</div>