Update Loaders (#4)

components/detail-disclosure.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
 import lodash from "lodash";
-import { ChevronDown, Loader2 } from "lucide-vue-next";
+import { ChevronDown } from "lucide-vue-next";
 
 import Centered from "@/components/ui/centered.vue";
-import { borderColors, icons, scrollbarColors } from "@/lib/colors";
+import Loader from "@/components/ui/loader.vue";
+import { borderColors, icons, scrollbarColors, textColors } from "@/lib/colors";
 import type { ModelString, TempTriple } from "@/types/resulttypes";
 
 const props = withDefaults(
@@ -124,9 +125,9 @@ const groupedRelations = computed(() => {
 				</table>
 			</slot>
 			<slot v-else>
-				<div class="relative mt-2">
+				<div class="relative mt-5" :class="textColors[model]">
 					<Centered>
-						<Loader2 class="size-8 animate-spin" />
+						<Loader />
 					</Centered>
 				</div>
 			</slot>

components/detail-page.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { Loader2 } from "lucide-vue-next";
-
 import Centered from "@/components/ui/centered.vue";
+import Loader from "@/components/ui/loader.vue";
 
 const t = useTranslations();
 
@@ -13,11 +12,11 @@ defineProps<{
 
 <template>
 	<div class="grid size-full grid-rows-[1fr_auto] px-2 py-4 xl:px-0">
-		<div class="mx-auto grid max-w-container grid-rows-[auto_1fr]">
+		<div class="mx-auto grid w-full max-w-container grid-rows-[auto_1fr]">
 			<div>
 				<slot name="head" />
 			</div>
-			<div class="mx-auto mt-16 grid max-w-container gap-16 md:grid-cols-[2fr_3fr]">
+			<div class="mx-auto mt-16 grid w-full max-w-container gap-16 md:grid-cols-[2fr_3fr]">
 				<div class="flex flex-col gap-8">
 					<div>
 						<h2 class="text-2xl">{{ t("DetailPage.basedata") }}</h2>
@@ -30,14 +29,14 @@ defineProps<{
 						<slot name="left" />
 					</div>
 					<Centered v-else>
-						<Loader2 class="size-8 animate-spin" />
+						<Loader />
 					</Centered>
 				</div>
 				<div v-if="!detailsLoading">
 					<slot name="right" />
 				</div>
 				<Centered v-else>
-					<Loader2 class="size-8 animate-spin" />
+					<Loader />
 				</Centered>
 			</div>
 		</div>

components/search-table.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { useQuery } from "@tanstack/vue-query";
-import { ChevronRight, Loader2, Search, XCircle } from "lucide-vue-next";
+import { ChevronRight, Search, XCircle } from "lucide-vue-next";
 
+import Loader from "@/components/ui/loader.vue";
 import type { PaginatedListResultType } from "@/types/resulttypes";
 
 interface ColumnEntry {
@@ -144,9 +145,11 @@ const input = ref(route.query.q === undefined ? "" : String(route.query.q));
 				</NuxtLink>
 			</template>
 		</table>
-		<Centered v-else>
-			<Loader2 class="size-8 animate-spin" />
-		</Centered>
+		<div v-else class="relative my-3 text-primary-950 dark:text-primary-200">
+			<Centered>
+				<Loader />
+			</Centered>
+		</div>
 		<Pagination
 			v-if="data && (data.next || data.previous)"
 			class="m-2"

components/ui/loader.vue

@@ -0,0 +1,84 @@
+<template>
+	<!-- eslint-disable tailwindcss/no-custom-classname -->
+	<div class="dots-3"></div>
+	<span class="sr-only">Loading</span>
+</template>
+
+<style>
+.dots-3 {
+	--_g: no-repeat radial-gradient(farthest-side, currentColor 94%, #0000);
+
+	position: relative;
+	width: 50px;
+	height: 28px;
+	background:
+		var(--_g) 50% 0,
+		var(--_g) 100% 0;
+	background-size: 12px 12px;
+	animation: d3-0 1.5s linear infinite;
+}
+
+.dots-3::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 12px;
+	border-radius: 50%;
+	background: currentColor;
+	animation:
+		d3-1 1.5s linear infinite,
+		d3-2 0.5s cubic-bezier(0, 200, 0.8, 200) infinite;
+	aspect-ratio: 1;
+}
+
+@keyframes d3-0 {
+	0%,
+	31% {
+		background-position:
+			50% 0,
+			100% 0;
+	}
+
+	33% {
+		background-position:
+			50% 100%,
+			100% 0;
+	}
+
+	43%,
+	64% {
+		background-position:
+			50% 0,
+			100% 0;
+	}
+
+	66% {
+		background-position:
+			50% 0,
+			100% 100%;
+	}
+
+	79% {
+		background-position:
+			50% 0,
+			100% 0;
+	}
+
+	100% {
+		transform: translateX(calc(-100% / 3));
+	}
+}
+
+@keyframes d3-1 {
+	100% {
+		left: calc(100% + 7px);
+	}
+}
+
+@keyframes d3-2 {
+	100% {
+		top: -0.1px;
+	}
+}
+</style>

lib/colors.ts

@@ -26,6 +26,14 @@ export const borderColors = {
 	institution: "border-institution-400 dark:border-institution-700",
 	salary: "border-salary-400 dark:border-salary-700",
 };
+export const textColors = {
+	event: "text-event-400 dark:text-event-700",
+	function: "text-function-400 dark:text-function-700",
+	person: "text-person-400 dark:text-person-700",
+	place: "text-place-400 dark:text-place-800",
+	institution: "text-institution-400 dark:text-institution-700",
+	salary: "text-salary-400 dark:text-salary-700",
+};
 export const scrollbarColors = {
 	event: "scrollbar-thumb-event-400/50 dark:scrollbar-thumb-event-700/50",
 	function: "scrollbar-thumb-function-400/50 dark:scrollbar-thumb-function-700/50",

pages/detail/event/[id].vue

@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/vue-query";
 
 import DetailPage from "@/components/detail-page.vue";
 import Timeline from "@/components/timeline.vue";
+import Loader from "@/components/ui/loader.vue";
 import { loadAndGroupRelations } from "@/lib/group-relations.ts";
 import type { TimelineObject } from "@/types/timeline";
 
@@ -52,13 +53,17 @@ const flattenedRelations = computed(() => {
 		)
 		.flat()
 		.filter((r): r is TimelineObject => Boolean(r.start_date))
-		.sort((r) => new Date(r.start_date ?? "").valueOf());
+		.sort((r) => new Date(String(r.start_date)).valueOf());
 	return res;
 });
 </script>
 
 <template>
-	<div v-if="data.entity.isLoading">Loading...</div>
+	<div v-if="data.entity.isLoading" class="relative">
+		<Centered>
+			<Loader />
+		</Centered>
+	</div>
 	<DetailPage v-else model="Event">
 		<template #head>
 			<h1 class="text-2xl font-bold text-primary-700 xl:my-3 xl:text-4xl dark:text-inherit">

pages/detail/function/[id].vue

@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/vue-query";
 
 import DetailPage from "@/components/detail-page.vue";
 import Timeline from "@/components/timeline.vue";
+import Loader from "@/components/ui/loader.vue";
 import { loadAndGroupRelations } from "@/lib/group-relations.ts";
 import type { TimelineObject } from "@/types/timeline";
 
@@ -53,13 +54,17 @@ const flattenedRelations = computed(() => {
 		)
 		.flat()
 		.filter((r): r is TimelineObject => Boolean(r.start_date))
-		.sort((r) => new Date(r.start_date ?? "").valueOf());
+		.sort((r) => new Date(String(r.start_date)).valueOf());
 	return res;
 });
 </script>
 
 <template>
-	<div v-if="data.entity.isLoading">Loading...</div>
+	<div v-if="data.entity.isLoading" class="relative">
+		<Centered>
+			<Loader />
+		</Centered>
+	</div>
 	<DetailPage v-else model="Function">
 		<template #head>
 			<h1 class="text-2xl font-bold text-primary-700 xl:my-3 xl:text-4xl dark:text-inherit">

pages/detail/institution/[id].vue

@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/vue-query";
 
 import DetailPage from "@/components/detail-page.vue";
 import Timeline from "@/components/timeline.vue";
+import Loader from "@/components/ui/loader.vue";
 import { loadAndGroupRelations } from "@/lib/group-relations.ts";
 import type { TimelineObject } from "@/types/timeline";
 
@@ -53,13 +54,17 @@ const flattenedRelations = computed(() => {
 		)
 		.flat()
 		.filter((r): r is TimelineObject => Boolean(r.start_date))
-		.sort((r) => new Date(r.start_date ?? "").valueOf());
+		.sort((r) => new Date(String(r.start_date)).valueOf());
 	return res;
 });
 </script>
 
 <template>
-	<div v-if="data.entity.isLoading">Loading...</div>
+	<div v-if="data.entity.isLoading" class="relative">
+		<Centered>
+			<Loader />
+		</Centered>
+	</div>
 	<DetailPage v-else model="Institution">
 		<template #head>
 			<h1 class="text-2xl font-bold text-primary-700 xl:my-3 xl:text-4xl dark:text-inherit">

pages/detail/person/[id].vue

@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/vue-query";
 
 import DetailPage from "@/components/detail-page.vue";
 import Timeline from "@/components/timeline.vue";
+import Loader from "@/components/ui/loader.vue";
 import { loadAndGroupRelations } from "@/lib/group-relations.ts";
 import type { TimelineObject } from "@/types/timeline";
 
@@ -53,13 +54,17 @@ const flattenedRelations = computed(() => {
 		)
 		.flat()
 		.filter((r): r is TimelineObject => Boolean(r.start_date))
-		.sort((r) => new Date(r.start_date ?? "").valueOf());
+		.sort((r) => new Date(String(r.start_date)).valueOf());
 	return res;
 });
 </script>
 
 <template>
-	<div v-if="data.entity.isLoading">Loading...</div>
+	<div v-if="data.entity.isLoading" class="relative">
+		<Centered>
+			<Loader />
+		</Centered>
+	</div>
 	<DetailPage v-else model="Person">
 		<template #head>
 			<h1 class="text-2xl font-bold text-primary-700 xl:my-3 xl:text-4xl dark:text-inherit">

pages/detail/place/[id].vue

@@ -4,6 +4,7 @@ import { useQuery } from "@tanstack/vue-query";
 import DetailPage from "@/components/detail-page.vue";
 import Map from "@/components/map.vue";
 import Timeline from "@/components/timeline.vue";
+import Loader from "@/components/ui/loader.vue";
 import { loadAndGroupRelations } from "@/lib/group-relations.ts";
 import type { TimelineObject } from "@/types/timeline";
 
@@ -54,13 +55,17 @@ const flattenedRelations = computed(() => {
 		)
 		.flat()
 		.filter((r): r is TimelineObject => Boolean(r.start_date))
-		.sort((r) => new Date(r.start_date ?? "").valueOf());
+		.sort((r) => new Date(String(r.start_date)).valueOf());
 	return res;
 });
 </script>
 
 <template>
-	<div v-if="data.entity.isLoading">Loading...</div>
+	<div v-if="data.entity.isLoading" class="relative">
+		<Centered>
+			<Loader />
+		</Centered>
+	</div>
 	<DetailPage v-else model="Place">
 		<template #head>
 			<h1 class="text-2xl font-bold text-primary-700 xl:my-3 xl:text-4xl dark:text-inherit">

pages/detail/salary/[id].vue

@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/vue-query";
 
 import DetailPage from "@/components/detail-page.vue";
 import Timeline from "@/components/timeline.vue";
+import Loader from "@/components/ui/loader.vue";
 import { loadAndGroupRelations } from "@/lib/group-relations.ts";
 import type { TimelineObject } from "@/types/timeline";
 
@@ -42,13 +43,17 @@ const flattenedRelations = computed(() => {
 		)
 		.flat()
 		.filter((r): r is TimelineObject => Boolean(r.start_date))
-		.sort((r) => new Date(r.start_date ?? "").valueOf());
+		.sort((r) => new Date(String(r.start_date)).valueOf());
 	return res;
 });
 </script>
 
 <template>
-	<div v-if="data.entity.isLoading">Loading...</div>
+	<div v-if="data.entity.isLoading" class="relative">
+		<Centered>
+			<Loader />
+		</Centered>
+	</div>
 	<DetailPage v-else model="Salary">
 		<template #head>
 			<h1 class="text-2xl font-bold text-primary-700 xl:my-3 xl:text-4xl dark:text-inherit">