feat(SPA): media page T0

web/src/components/MediaSkeletonGrid.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+	count: number
+}>()
+</script>
+
+<template>
+	<div
+		aria-busy="true"
+		data-testid="media-skeleton"
+		class="grid grid-cols-2 gap-2.5 md:grid-cols-5 md:gap-4"
+	>
+		<span role="status" class="sr-only">Loading images</span>
+		<div
+			v-for="n in count"
+			:key="n"
+			data-testid="media-skeleton-card"
+			class="border border-default bg-default"
+		>
+			<USkeleton class="aspect-4/3 w-full rounded-none bg-accented" />
+			<div class="flex flex-col gap-2 px-3 py-2.5">
+				<USkeleton class="h-3.25 w-[70%] rounded-none bg-accented" />
+				<USkeleton class="h-2.75 w-[45%] rounded-none bg-accented" />
+				<USkeleton class="h-5 w-15 rounded-none bg-accented" />
+			</div>
+		</div>
+	</div>
+</template>