Loading Events

public/css/components/calendar/frame.css

@@ -127,6 +127,9 @@
 	height: calc(var(--fhc-calendar-fontsize-event, .875rem) + 2 * var(--fhc-calendar-margin-event-icon, .5rem));
 	overflow: hidden;
 }
+.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event .placeholder-glow {
+	text-indent: 0;
+}
 .fhc-calendar-mode-month .fhc-calendar-base-grid-line-event * {
 	max-height: 100%;
 	max-width: 100%;

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>

public/js/composables/EventLoader.js

@@ -1,5 +1,8 @@
 export function useEventLoader(rangeInterval, getPromiseFunc) {
+	let loading_id = 0;
 	const events = Vue.ref([]);
+	const loadingEvents = Vue.ref([]);
+	const allEvents = Vue.computed(() => events.value.concat(loadingEvents.value));
 	const lv = Vue.ref(null);
 	const eventsLoaded = [];
 
@@ -93,9 +96,16 @@ export function useEventLoader(rangeInterval, getPromiseFunc) {
 			}
 		}
 
-		if (start.ts > end.ts)
+		if (start.ts >= end.ts)
 			return result;
 
+		loadingEvents.value.push({
+			loading_id: loading_id++,
+			type: "loading",
+			isostart: start.toISODate() + 'T' + start.toISOTime(),
+			isoend: end.toISODate() + 'T' + end.toISOTime()
+		});
+
 		return mergePromiseArr(getPromiseFunc(start, end), result);
 	};
 
@@ -116,10 +126,11 @@ export function useEventLoader(rangeInterval, getPromiseFunc) {
 							lv.value = res.value.meta.lv;
 
 						events.value = events.value.concat(res.value.data);
+						loadingEvents.value = [];
 					}
 				})
 			});
 	})
 
-	return { events, lv }
+	return { events: allEvents, lv }
 }