From f4918e6011fffa2cb923fe4c172e6ec7c440d3c5 Mon Sep 17 00:00:00 2001
From: "Aman Kumar [SSW]" <71385247+amankumarrr@users.noreply.github.com>
Date: Thu, 31 Oct 2024 16:02:20 +1100
Subject: [PATCH] Adding placeholder image for the events

---
 app/loading.tsx              |   8 +++++---
 components/filter/events.tsx |  13 ++++++++++++-
 public/event_placeholder.png | Bin 0 -> 435 bytes
 3 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 public/event_placeholder.png

diff --git a/app/loading.tsx b/app/loading.tsx
index 3c8b1de7c4..405986c427 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,7 +1,9 @@
 import { Container } from "@/components/util/container";
 
-export default function Loading() {
+const Loading = () => (
   <Container className="flex justify-center" width="large" size="custom">
     <h1>Loading...</h1>
-  </Container>;
-}
+  </Container>
+);
+
+export default Loading;
diff --git a/components/filter/events.tsx b/components/filter/events.tsx
index 0b58cde410..6e39613a66 100644
--- a/components/filter/events.tsx
+++ b/components/filter/events.tsx
@@ -300,6 +300,7 @@ const Event = ({ visible, event, jsonLd }: EventProps) => {
   }
 
   const { formattedDate, relativeDate } = useFormatDates(event, true);
+  const [bannerLoaded, setBannerLoaded] = useState(false);
   return (
     <>
       <Transition
@@ -314,13 +315,23 @@ const Event = ({ visible, event, jsonLd }: EventProps) => {
       >
         <div className="mb-8 flex max-md:flex-col md:flex-row">
           <div className="mr-3 shrink-0">
+            {!bannerLoaded && (
+              <Image
+                className="rounded-md max-md:pb-3"
+                height={100}
+                width={100}
+                alt={`${event.thumbnailDescription || event.title} placeholder`}
+                src="/event_placeholder.png"
+              />
+            )}
             <Image
-              className="rounded-md max-md:pb-3"
+              className={`rounded-md max-md:pb-3 ${bannerLoaded ? "" : "invisible h-0"}`}
               height={100}
               width={100}
               alt={`${event.thumbnailDescription || event.title} logo`}
               src={thumbnail}
               onError={handleImageError}
+              onLoad={() => setBannerLoaded(true)}
             />
           </div>
           <div>
diff --git a/public/event_placeholder.png b/public/event_placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..37ab30a30c5ee5e194d4ac08db7c022c387878ea
GIT binary patch
literal 435
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$`B3jKx9jP7LeL$-D%zb3I)gLn`9l
zUfsyaV8C<aK*j&syJ{0OL*}Rp2=%9zzb}+zR`ytSlwEMiRp$v2{EjRuB|AR;P;5HF
zbEH7WWx|X`iN012A!C8V8wDJb*pe*7lswKj@Emty>6Gkv7}23%$ZROXEvS;F(3U*n
bHO*nS`_&Q=Hla2L7z+%Zu6{1-oD!M<DeH@q

literal 0
HcmV?d00001