31 lines
772 B
Vue
31 lines
772 B
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
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">{{ t('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>
|