console/app/components/showcase/Skeleton.vue at main · agentruntimecontrolprotocol/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic shapes">
      <div class="flex flex-col gap-3">
        <USkeleton class="h-4 w-64 rounded" />
        <USkeleton class="h-4 w-48 rounded" />
        <USkeleton class="h-4 w-56 rounded" />
      </div>
    </GallerySection>

    <GallerySection title="Avatar + text (agent card)">
      <div class="flex items-center gap-4">
        <USkeleton class="h-12 w-12 rounded-full" />
        <div class="flex flex-col gap-2">
          <USkeleton class="h-4 w-40 rounded" />
          <USkeleton class="h-3 w-28 rounded" />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Job queue row">
      <div class="flex w-full max-w-lg flex-col gap-3">
        <div v-for="i in 4" :key="i" class="flex items-center gap-3">
          <USkeleton class="h-5 w-5 rounded" />
          <USkeleton class="h-4 flex-1 rounded" />
          <USkeleton class="h-4 w-16 rounded" />
          <USkeleton class="h-6 w-20 rounded-full" />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Session trace timeline">
      <div class="flex w-full max-w-md flex-col gap-4">
        <div v-for="i in 3" :key="i" class="flex gap-3">
          <div class="flex flex-col items-center gap-1">
            <USkeleton class="h-4 w-4 rounded-full" />
            <USkeleton class="h-10 w-0.5 rounded" />
          </div>
          <div class="flex flex-col gap-2 pb-2">
            <USkeleton class="h-4 w-48 rounded" />
            <USkeleton class="h-3 w-32 rounded" />
          </div>
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Runtime metrics card">
      <div class="flex w-full max-w-sm flex-col gap-4 rounded-lg border border-[var(--ui-border)] p-4">
        <div class="flex items-center justify-between">
          <USkeleton class="h-5 w-32 rounded" />
          <USkeleton class="h-5 w-16 rounded-full" />
        </div>
        <USkeleton class="h-24 w-full rounded-md" />
        <div class="grid grid-cols-3 gap-3">
          <div v-for="i in 3" :key="i" class="flex flex-col gap-1">
            <USkeleton class="h-6 w-full rounded" />
            <USkeleton class="h-3 w-3/4 rounded" />
          </div>
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Event log table">
      <div class="w-full max-w-lg">
        <div class="flex gap-4 border-b border-[var(--ui-border)] pb-2 mb-3">
          <USkeleton class="h-4 w-24 rounded" />
          <USkeleton class="h-4 w-32 rounded" />
          <USkeleton class="h-4 w-20 rounded" />
          <USkeleton class="h-4 w-16 rounded" />
        </div>
        <div v-for="i in 5" :key="i" class="flex gap-4 py-2 border-b border-[var(--ui-border)]">
          <USkeleton class="h-4 w-24 rounded" />
          <USkeleton class="h-4 w-32 rounded" />
          <USkeleton class="h-4 w-20 rounded" />
          <USkeleton class="h-5 w-16 rounded-full" />
        </div>
      </div>
    </GallerySection>
  </div>
</template>