add some skeleton code

src/components/events/EventTitle.astro

@@ -5,11 +5,19 @@ import { LiaDotCircle } from "react-icons/lia";
 ---
 
 <div class="w-full pt-[25vh] flex justify-center relative">
-    <Image
+    <div class="w-[45%] rounded-[2vw] aspect-[2/1] relative">
-        src={eventbg}
+        <div
-        alt="Event Page Background"
+            id="event-skeleton"
-        class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover"
+            class="skeleton absolute inset-0 rounded-[2vw] z-0"
-    />
+        >
+        </div>
+        <Image
+            id="event-image"
+            src={eventbg}
+            alt="Event Page Background"
+            class="w-full h-full rounded-[2vw] object-cover absolute top-0 left-0 z-1"
+        />
+    </div>
     <div
         class="absolute -bottom-[6%] left-[20%] flex items-center text-[3vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]"
     >
@@ -17,3 +25,16 @@ import { LiaDotCircle } from "react-icons/lia";
         <p>EVENTS</p>
     </div>
 </div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const image = document.getElementById("event-image");
+        const skeleton = document.getElementById("event-skeleton");
+
+        if (image && skeleton) {
+            image.onload = () => {
+                skeleton.style.display = "none";
+            };
+        }
+    });
+</script>

src/components/projects/ProjectSection.astro

@@ -15,13 +15,17 @@ import { Image } from "astro:assets";
                 data-project={index + 1}
                 target={title === "Supercomputing" ? "_blank" : "_self"}
             >
-                <Image
+                <div class="relative w-full h-full">
-                    src={project.image}
+                    <div class="skeleton absolute inset-0 rounded-[1.5vw] z-0" />
-                    alt={`${title} Project`}
+                    <Image
-                    width={668}
+                        src={project.image}
-                    height={990}
+                        alt={`${title} Project`}
-                    class="opacity-70 w-full h-full object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110"
+                        width={668}
-                />
+                        height={990}
+                        class="opacity-70 w-full h-full object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 z-10"
+                        style="opacity: 0;"
+                    />
+                </div>
                 <div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]">
                     <div class="w-full">
                         <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap text-[1.2vw] font-light mb-[5%]">
@@ -120,4 +124,33 @@ import { Image } from "astro:assets";
     initializeProjectCards();
 
     document.addEventListener("astro:page-load", initializeProjectCards);
+
+    // Image loading handler
+    function handleImageLoading() {
+        const projectImages = document.querySelectorAll(".project-card img");
+
+        projectImages.forEach((image, index) => {
+            // Ensure the image is fully loaded, even if it's already in cache
+            if (image.complete) {
+                image.style.opacity = "1";
+                const skeleton = image.previousElementSibling;
+                if (skeleton && skeleton.classList.contains("skeleton")) {
+                    skeleton.style.display = "none";
+                }
+            } else {
+                image.addEventListener("load", () => {
+                    image.style.opacity = "1";
+                    const skeleton = image.previousElementSibling;
+                    if (skeleton && skeleton.classList.contains("skeleton")) {
+                        skeleton.style.display = "none";
+                    }
+                });
+            }
+        });
+    }
+
+    // Ensure images are loaded after a short delay
+    setTimeout(handleImageLoading, 100);
+    handleImageLoading();
+    document.addEventListener("astro:page-load", handleImageLoading);
 </script>

src/components/projects/QP.astro

@@ -11,11 +11,19 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
         <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
         <p>Quarterly Project</p>
     </div>
-    <Image
+    <div class="w-[70vw] aspect-[2.5/1] relative">
-        src={qp}
+        <div
-        alt="qp showcase photo"
+            id="qp-skeleton"
-        class="w-[70vw] aspect-[2.5/1] rounded-full"
+            class="skeleton absolute inset-0 rounded-full z-0"
-    />
+        >
+        </div>
+        <Image
+            id="qp-image"
+            src={qp}
+            alt="qp showcase photo"
+            class="w-[70vw] aspect-[2.5/1] rounded-full absolute top-0 left-0 z-1"
+        />
+    </div>
     <Link
         data-inview
         href="/quarterly"
@@ -39,3 +47,16 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
         </p>
     </div>
 </div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const image = document.getElementById("qp-image");
+        const skeleton = document.getElementById("qp-skeleton");
+
+        if (image) {
+            image.onload = () => {
+                skeleton.style.display = "none";
+            };
+        }
+    });
+</script>

src/pages/find.astro

@@ -21,11 +21,13 @@ import contactbroder from "../images/contactbroder.webp";
     />
     <FindTitle />
     <div class="w-full flex justify-center">
-        <Image
+        <div class="skeleton w-3/4 rounded-full">
-            src={event}
+            <Image
-            alt="board group photos"
+                src={event}
-            class="w-3/4 rounded-full"
+                alt="board group photos"
-        />
+                class="w-full rounded-full"
+            />
+        </div>
     </div>
     <Findus />
     <Social />