fix: technical debts left by the Sites, Authors and SEO slices, plus backend support for the new Sites and Authors pagination

web/src/components/EditorSkeleton.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+const emit = defineEmits<{
+	back: []
+}>()
+</script>
+
+<template>
+	<div aria-busy="true" class="flex min-h-0 flex-1 flex-col lg:flex-row">
+		<div class="flex min-h-0 min-w-0 flex-1 flex-col">
+			<div
+				class="flex flex-shrink-0 items-center gap-2.5 border-b border-default bg-default px-6 py-3.5"
+			>
+				<UButton
+					icon="i-lucide-arrow-left"
+					color="neutral"
+					variant="ghost"
+					class="size-8 justify-center text-toned"
+					:aria-label="t('Back to Articles')"
+					@click="emit('back')"
+				/>
+				<USkeleton class="h-5 w-80 rounded-none" data-testid="skeleton-title" />
+				<USkeleton class="h-5.5 w-15 rounded-none" />
+			</div>
+			<div
+				class="min-h-0 max-w-168 flex-1 space-y-3.5 px-12 py-10"
+				data-testid="skeleton-content"
+			>
+				<USkeleton class="h-3.5 w-full rounded-none" />
+				<USkeleton class="h-3.5 w-11/12 rounded-none" />
+				<USkeleton class="h-3.5 w-4/5 rounded-none" />
+				<USkeleton class="mt-4.5 h-5.5 w-2/5 rounded-none" />
+				<USkeleton class="h-3.5 w-full rounded-none" />
+				<USkeleton class="h-3.5 w-3/4 rounded-none" />
+			</div>
+		</div>
+		<div
+			class="w-70 flex-shrink-0 space-y-2.5 border-default p-5 lg:border-l"
+			data-testid="skeleton-details"
+		>
+			<div class="flex flex-col gap-3 border-b border-default pb-4">
+				<div class="flex min-h-6 items-center gap-2 text-highlighted">
+					<UIcon name="i-lucide-chevron-down" class="size-3.5 -rotate-90" />
+					<span class="text-sm font-semibold">{{ t('Site and authors') }}</span>
+				</div>
+				<USkeleton class="ml-5.5 h-3 w-2/5 rounded-none" data-testid="skeleton-meta" />
+			</div>
+			<div class="flex flex-col gap-3 border-b border-default pb-4">
+				<div class="flex min-h-6 items-center gap-2 text-highlighted">
+					<UIcon name="i-lucide-chevron-down" class="size-3.5 -rotate-90" />
+					<span class="text-sm font-semibold">{{ t('Search and sharing') }}</span>
+				</div>
+				<USkeleton class="ml-5.5 h-3 w-2/5 rounded-none" data-testid="skeleton-seo" />
+			</div>
+			<USkeleton class="h-3 w-full rounded-none" />
+			<USkeleton class="h-3 w-full rounded-none" />
+			<USkeleton class="h-3 w-3/5 rounded-none" />
+		</div>
+	</div>
+</template>