403b94fa2c
Backend: rate limiter, security headers, blockchain cache service avec RPC, public API (7 endpoints read-only), WebSocket auth + heartbeat, DB connection pooling, structured logging, health check DB. Frontend: API retry/timeout, WebSocket auth + heartbeat + typed events, notifications toast, mobile hamburger + drawer, error boundary, offline banner, loading skeletons, dashboard enrichi. Documentation: guides utilisateur complets (demarrage, vote, sanctuaire, FAQ 30+), guide deploiement, politique securite. 123 tests, 155 fichiers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* Reusable skeleton loader component.
|
|
*
|
|
* Provides multiple skeleton variants for loading states:
|
|
* - Card: card layout with title and content lines
|
|
* - List: multiple rows with optional avatar
|
|
* - Detail: detailed view with mixed content
|
|
*
|
|
* Uses Nuxt UI USkeleton components.
|
|
*/
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
/** Number of skeleton lines to display (default: 3). */
|
|
lines?: number
|
|
/** Show an avatar circle placeholder. */
|
|
avatar?: boolean
|
|
/** Render as a card skeleton with border and padding. */
|
|
card?: boolean
|
|
}>(),
|
|
{
|
|
lines: 3,
|
|
avatar: false,
|
|
card: false,
|
|
},
|
|
)
|
|
|
|
/** Generate varying line widths for a natural appearance. */
|
|
const lineWidths = computed(() => {
|
|
const widths = ['w-full', 'w-3/4', 'w-5/6', 'w-2/3', 'w-4/5']
|
|
return Array.from({ length: props.lines }, (_, i) => widths[i % widths.length])
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Card variant -->
|
|
<UCard v-if="card" class="animate-pulse">
|
|
<div class="space-y-4">
|
|
<!-- Optional avatar row -->
|
|
<div v-if="avatar" class="flex items-center gap-3">
|
|
<USkeleton class="h-10 w-10 rounded-full" />
|
|
<div class="flex-1 space-y-2">
|
|
<USkeleton class="h-4 w-1/3" />
|
|
<USkeleton class="h-3 w-1/4" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Title line -->
|
|
<USkeleton class="h-5 w-2/3" />
|
|
|
|
<!-- Content lines -->
|
|
<div class="space-y-2">
|
|
<USkeleton
|
|
v-for="(width, i) in lineWidths"
|
|
:key="i"
|
|
class="h-3"
|
|
:class="width"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- List / default variant -->
|
|
<div v-else class="space-y-3 animate-pulse">
|
|
<div
|
|
v-for="(width, i) in lineWidths"
|
|
:key="i"
|
|
class="flex items-center gap-3"
|
|
>
|
|
<!-- Optional avatar per line -->
|
|
<USkeleton v-if="avatar" class="h-8 w-8 rounded-full flex-shrink-0" />
|
|
|
|
<!-- Line content -->
|
|
<div class="flex-1 space-y-1">
|
|
<USkeleton class="h-3" :class="width" />
|
|
<USkeleton v-if="i === 0" class="h-2 w-1/4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|