ui: add loading placeholder for images

Author: aster-void

src/components/ArticleList.astro

@@ -63,7 +63,7 @@ const articlesWithExcerpts = await Promise.all(
               alt="カバー画像"
               src={article.data.image}
               class:list={[
-                "min-h-0 w-full rounded-xl object-center",
+                "skeleton min-h-0 w-full rounded-xl object-center",
                 additionalProps.imageClassName,
               ]}
             />

src/components/ProjectList.astro

@@ -28,7 +28,7 @@ const { projects, variant = "full" } = props;
             loading={i < 6 && variant === "full" ? "eager" : "lazy"}
             alt="プロジェクトのイメージ画像"
             src={project.data.image}
-            class="max-h-[24rem] w-full object-contain"
+            class="skeleton max-h-[24rem] w-full object-contain"
           />
           <div class="p-4">
             <h3 class="text-xl font-bold text-gray-800">

src/layouts/meta.astro

@@ -11,7 +11,7 @@ const url = Astro.url.href;
 
 <meta charset="utf-8" />
 <title>{title ? title + " | ut.code();" : "ut.code();"}</title>
-<link rel="icon" href="/public/favicon-64x.png" />
+<link rel="icon" href="/favicon-64x.png" />
 <link rel="sitemap" href="/sitemap-index.xml" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta

src/pages/articles/[article].astro

@@ -36,7 +36,7 @@ if (article.data.author && !author)
         <Picture
           loading="eager"
           formats={["avif", "webp"]}
-          class="mx-auto md:max-w-xl md:rounded-2xl"
+          class="skeleton mx-auto md:max-w-xl md:rounded-2xl"
           alt="イメージ画像"
           src={article.data.image}
         />

src/pages/contact.astro

@@ -22,7 +22,7 @@ import { Focus } from "../schema";
     src={Header}
     width="1920"
     height="600"
-    class="h-30 object-cover sm:h-50 md:h-100"
+    class="h-30 bg-amber-200 object-cover sm:h-50 md:h-100"
   />
   <main class="prose mx-auto max-w-none px-16 py-16 md:px-32">
     <h2>お問い合わせ</h2>

src/pages/donation.astro

@@ -21,7 +21,7 @@ import { Focus } from "../schema";
     src={Header}
     width="1920"
     height="600"
-    class="my-8 h-100 w-full object-cover md:h-150"
+    class="my-8 h-100 w-full bg-stone-500 object-cover md:h-150"
   />
   <article class="prose mx-5 mb-20 max-w-xl sm:mx-10 md:mx-auto">
     <p>ut.code(); は、学生の手で自主的に運営されている団体です。</p><p>

src/pages/index.astro

@@ -36,7 +36,7 @@ articles.splice(3);
     formats={["avif", "webp"]}
     alt=""
     loading="lazy"
-    class="fixed bottom-0 -z-10 h-full max-w-full object-cover object-center select-none"
+    class="skeleton fixed bottom-0 -z-10 h-full max-w-full object-cover object-center select-none"
     src={Hero}
   />
   <div class="absolute top-[40%] left-10 mr-10 max-w-lg bg-gray-50 p-8 pb-24">

src/pages/join.astro

@@ -21,7 +21,7 @@ import { Focus } from "../schema";
     width="1920"
     height="600"
     quality="mid"
-    class="top-0 w-full object-cover object-top"
+    class="top-0 w-full bg-pink-100 object-cover object-top"
   />
   <main class="px-16 py-16">
     <div class="prose max-w-none">

src/pages/members.astro

@@ -21,7 +21,7 @@ const members = (await getCollection("members")).sort(
     loading="eager"
     alt=""
     src={Header}
-    class="fixed bottom-0 -z-100 h-[100vh] object-cover"
+    class="fixed bottom-0 -z-100 h-[100vh] bg-neutral-400 object-cover"
     style="object-position: 75% 20%;"
     aria-hidden
   />
@@ -47,6 +47,7 @@ const members = (await getCollection("members")).sort(
                 src={member.data.upperBodyImage}
                 width="400"
                 height="400"
+                class="skeleton"
               />
               <div class="absolute bottom-0 w-full min-w-45 bg-gradient-to-b from-transparent to-black px-6 pt-12 pb-6 text-white">
                 <h2 class="text-3xl">{member.data.nameJa}</h2>

src/pages/members/[member].astro

@@ -88,7 +88,7 @@ const { Content } = await render(member);
         <div class="flex-1">
           <Picture
             fit="cover"
-            class="w-40 rounded-full sm:w-100 sm:rounded-none lg:w-150"
+            class="skeleton w-40 rounded-full sm:w-100 sm:rounded-none lg:w-150"
             alt="メンバー写真"
             width="600"
             height="600"