From 34baddaffbbfea0786787f59b66403222e96182f Mon Sep 17 00:00:00 2001
From: Matt Welsh <mdw@mdw.la>
Date: Thu, 12 Dec 2024 20:05:26 -0800
Subject: [PATCH] Use Apple II loading effect.

---
 astro/src/pages/index.astro | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
index 7d93d70..be662be 100644
--- a/astro/src/pages/index.astro
+++ b/astro/src/pages/index.astro
@@ -10,6 +10,7 @@ import Socials from "@components/Socials.astro";
 import getSortedPosts from "@utils/getSortedPosts";
 import { SOCIALS } from "@config";
 import { Content as IntroContent } from "@content/main/intro.mdx";
+import { LoadingImage } from "@components/LoadingImage";
 
 const posts = await getCollection("pages");
 const sortedPosts = getSortedPosts(posts);
@@ -20,11 +21,9 @@ const socialCount = SOCIALS.filter(social => social.active).length;
   <Header />
   <main id="main-content"></main>
   <section id="hero">
-    <img
-      class="md:block float-right mx-4 size-[120px] sm:size-[200px]"
-      src="/mdw-woods-lowres.png"
-      alt="Matt Welsh image"
-    />
+    <div class="md:block float-right mx-4 size-[120px] sm:size-[200px]">
+      <LoadingImage client:load src="/mdw-woods-lowres.png" />
+    </div>
     <article
       id="article"
       role="article"