Skeleton 與 Shimmer 載入效果：減少元件載入時的版面跳動

1
████░░████████
2
    → 亮光掃過

1
Skeleton = 骨架本體
2
Shimmer = 骨架上掃過的動畫

1
<div class="skeleton" aria-hidden="true"></div>

1
.skeleton {
2
  position: relative;
3
  overflow: hidden;
4
  width: 300px;
5
  height: 20px;
6
  background: #e5e7eb;
7
  border-radius: 6px;
8
}
9

10
.skeleton::after {
11
  content: "";
12
  position: absolute;
13
  inset: 0;
14
  transform: translateX(-100%);
15
  background: linear-gradient(
16
    90deg,
17
    transparent,
18
    rgb(255 255 255 / 60%),
19
    transparent
20
  );
21
  animation: shimmer 1.5s infinite;
22
}
23

24
@keyframes shimmer {
25
  100% {
26
    transform: translateX(100%);
27
  }
28
}

1
<div
2
  class="flex max-w-sm space-x-4 rounded-md p-4 motion-safe:animate-pulse"
3
  aria-hidden="true"
4
>
5
  <div class="h-10 w-10 rounded-full bg-slate-200 dark:bg-slate-700"></div>
6

7
  <div class="flex-1 space-y-3 py-1">
8
    <div class="h-2 w-2/3 rounded bg-slate-200 dark:bg-slate-700"></div>
9
    <div class="h-2 rounded bg-slate-200 dark:bg-slate-700"></div>
10
    <div class="h-2 w-4/5 rounded bg-slate-200 dark:bg-slate-700"></div>
11
  </div>
12
</div>

1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
  theme: {
4
    extend: {
5
      keyframes: {
6
        shimmer: {
7
          "0%": { transform: "translateX(-100%)" },
8
          "100%": { transform: "translateX(100%)" },
9
        },
10
      },
11
      animation: {
12
        shimmer: "shimmer 1.5s linear infinite",
13
      },
14
    },
15
  },
16
};

1
<div
2
  class="relative h-5 w-72 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700"
3
  aria-hidden="true"
4
>
5
  <div
6
    class="absolute inset-0 bg-gradient-to-r from-transparent via-white/60 to-transparent motion-safe:animate-shimmer motion-reduce:hidden"
7
  ></div>
8
</div>

1
<article class="card-skeleton" aria-hidden="true">
2
  <div class="skeleton avatar"></div>
3

4
  <div class="content">
5
    <div class="skeleton title"></div>
6
    <div class="skeleton text"></div>
7
    <div class="skeleton text short"></div>
8
  </div>
9
</article>

1
.card-skeleton {
2
  display: flex;
3
  gap: 16px;
4
  min-height: 96px;
5
  padding: 16px;
6
}
7

8
.avatar {
9
  width: 64px;
10
  height: 64px;
11
  border-radius: 50%;
12
  flex-shrink: 0;
13
}
14

15
.content {
16
  flex: 1;
17
}
18

19
.title {
20
  width: 45%;
21
  height: 20px;
22
  margin-bottom: 12px;
23
}
24

25
.text {
26
  width: 100%;
27
  height: 14px;
28
  margin-bottom: 8px;
29
}
30

31
.text.short {
32
  width: 70%;
33
}

1
<script setup lang="ts">
2
import { onMounted, ref } from "vue";
3

4
type Product = {
5
  id: number;
6
  name: string;
7
  description: string;
8
};
9

10
const product = ref<Product | null>(null);
11
const loading = ref(true);
12
const showSkeleton = ref(false);
13
const errorMessage = ref("");
14

15
async function fetchProduct() {
16
  const skeletonTimer = window.setTimeout(() => {
17
    showSkeleton.value = true;
18
  }, 200);
19

20
  try {
21
    const response = await fetch("/api/products/1");
22

23
    if (!response.ok) {
24
      throw new Error(`HTTP ${response.status}`);
25
    }
26

27
    product.value = await response.json();
28
  } catch {
29
    errorMessage.value = "商品載入失敗，請稍後再試。";
30
  } finally {
31
    window.clearTimeout(skeletonTimer);
32
    showSkeleton.value = false;
33
    loading.value = false;
34
  }
35
}
36

37
onMounted(fetchProduct);
38
</script>
39

40
<template>
41
  <section class="product-region" :aria-busy="loading">
42
    <ProductSkeleton v-if="showSkeleton" />
43
    <ProductCard v-else-if="product" :product="product" />
44
    <p v-else-if="errorMessage" role="alert">{{ errorMessage }}</p>
45
  </section>
46
</template>
47

48
<style scoped>
49
.product-region {
50
  min-height: 160px;
51
}
52
</style>

1
@media (prefers-reduced-motion: reduce) {
2
  .skeleton::after {
3
    animation: none;
4
  }
5
}