From 8c255b7f63f594b5859093859fec2e6a9b809eb7 Mon Sep 17 00:00:00 2001
From: Luke Oldenburg <87272260+Luke-Oldenburg@users.noreply.github.com>
Date: Mon, 30 Dec 2024 13:34:13 -0500
Subject: [PATCH] Improve image loading

---
 src/components/Socials.astro | 18 +++++++++++++++---
 src/pages/index.astro        |  1 +
 src/pages/team.astro         |  4 ++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/Socials.astro b/src/components/Socials.astro
index 96ff981..01572cd 100644
--- a/src/components/Socials.astro
+++ b/src/components/Socials.astro
@@ -3,12 +3,24 @@ import { Image } from "astro:assets";
 ---
 
 <div
-  class="h-1/12 bg-bot-orange fixed bottom-0 right-0 w-1/12 p-2 sm:h-auto sm:w-auto sm:p-5"
+  class="h-1/12 fixed bottom-0 right-0 w-1/12 bg-bot-orange p-2 sm:h-auto sm:w-auto sm:p-5"
 >
   <a href="https://www.linkedin.com/company/back-on-track-america/">
-    <Image src="/linkedin.svg" alt="LinkedIn Icon" width="40" height="40" />
+    <Image
+      src="/linkedin.svg"
+      alt="LinkedIn Icon"
+      width="40"
+      height="40"
+      loading="eager"
+    />
   </a>
   <a href="https://www.instagram.com/backontrackamerica/">
-    <Image src="/instagram.svg" alt="Instagram Icon" width="40" height="40" />
+    <Image
+      src="/instagram.svg"
+      alt="Instagram Icon"
+      width="40"
+      height="40"
+      loading="eager"
+    />
   </a>
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e2eca83..ab21c2e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -22,6 +22,7 @@ import BackOnTrackLayout from "../layouts/BackOnTrackLayout.astro";
     class="h-fit w-screen"
     width="5000"
     height="3000"
+    loading="eager"
   />
   <Image
     src="/partners.png"
diff --git a/src/pages/team.astro b/src/pages/team.astro
index d2ff2b8..087e6e5 100644
--- a/src/pages/team.astro
+++ b/src/pages/team.astro
@@ -37,6 +37,7 @@ const records = await pb.collection("team").getFullList({
             class="w-full object-cover pb-1"
             width="400"
             height="300"
+            loading="eager"
           />
           <p class="text-2xl font-bold text-bot-blue">{record.name}</p>
           <p class="text-lg">{record.title}</p>
@@ -46,6 +47,7 @@ const records = await pb.collection("team").getFullList({
               alt="Location Icon"
               width="24"
               height="24"
+              loading="eager"
             />
             <p class="m-1 text-lg">{record.location}</p>
           </div>
@@ -62,6 +64,7 @@ const records = await pb.collection("team").getFullList({
                       alt="Instagram Icon"
                       width="40"
                       height="40"
+                      loading="eager"
                     />
                   </a>
                 );
@@ -76,6 +79,7 @@ const records = await pb.collection("team").getFullList({
                       alt="LinkedIn Icon"
                       width="40"
                       height="40"
+                      loading="eager"
                     />
                   </a>
                 );