diff --git a/app/loading.tsx b/app/loading.tsx
index 3c8b1de7c..405986c42 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 0b58cde41..6e39613a6 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 000000000..37ab30a30
Binary files /dev/null and b/public/event_placeholder.png differ