Files
traefik-llmgateway/webui/src/components/SkeletonList.vue
T
lukaszraczylo cf308624af feat(webui): make the dashboard responsive and add loading and empty states
Every tab row scrolls sideways instead of being clipped by its card.
On phones this hid tabs, such as the Config change helper's last forms
at 360-390px. The login button has a larger touch target, and long
names are truncated with a tooltip.

Loading and empty states:
- Skeletons show only while a selection has no data yet, never over
  data already on screen during a refresh.
- Empty states name the next step to take.
- Error states offer a Retry button that shows progress, and each card
  keeps its own error.
- Toasts confirm copies and key generation, and report background
  failures once per streak through polite and assertive live regions.

Other changes:
- The access matrix switches between Models, MCP servers and Agents,
  and says "none configured" only once its data has loaded.
- Home ranks the top 5 users by cost, requests or tokens. It requests
  only the needed metrics and warns before a range exceeds the
  server's key cap.
- MCP and agent deep links accept a bare target name.

admin_assets_gen.go is regenerated.

Claude-Session: https://claude.ai/code/session_01V5jYJNxpDFdJkyyExpADrv
2026-09-23 23:02:22 +01:00

24 lines
805 B
Vue

<script setup lang="ts">
import { Skeleton } from '@/components/ui/skeleton'
/**
* SkeletonList mirrors TopList.vue's own ranked-row shape (rank number,
* label, right-aligned value) — `rows` pulsing rows, defaulting to 5 to
* match "top 5" lists, so a list card swapping this in for its first load
* causes no layout shift once real rows arrive.
*/
withDefaults(defineProps<{ rows?: number }>(), { rows: 5 })
</script>
<template>
<ol class="flex flex-col gap-1.5">
<li v-for="r in rows" :key="r" class="flex items-center justify-between gap-3">
<span class="flex min-w-0 flex-1 items-center gap-2">
<Skeleton class="h-3 w-4 shrink-0" />
<Skeleton class="h-4 w-full max-w-40" />
</span>
<Skeleton class="h-4 w-12 shrink-0" />
</li>
</ol>
</template>