From b10ebf6e17e086bb8d1e2fd47dc014fe09f5594f Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Tue, 28 Oct 2025 19:44:34 -0400
Subject: [PATCH] add lazy loading for pub icon and bg images

---
 app/(home-pages)/discover/PubListing.tsx | 25 +++++++++++++++++-------
 components/ActionBar/Publications.tsx    | 18 ++++++++---------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/app/(home-pages)/discover/PubListing.tsx b/app/(home-pages)/discover/PubListing.tsx
index be1ef53e..e3bc5224 100644
--- a/app/(home-pages)/discover/PubListing.tsx
+++ b/app/(home-pages)/discover/PubListing.tsx
@@ -31,19 +31,30 @@ export const PubListing = (
     <BaseThemeProvider {...theme} local>
       <a
         href={`https://${record.base_path}`}
-        style={{
-          backgroundImage: `url(${backgroundImage})`,
-          backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
-          backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
-        }}
         className={`no-underline! flex flex-row gap-2
           bg-bg-leaflet
           border border-border-light rounded-lg
           px-3 py-3 selected-outline
-          hover:outline-accent-contrast hover:border-accent-contrast`}
+          hover:outline-accent-contrast hover:border-accent-contrast
+          relative overflow-hidden`}
       >
+        {backgroundImage && (
+          <img
+            src={backgroundImage}
+            alt=""
+            loading="lazy"
+            fetchPriority="low"
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              width: backgroundImageRepeat ? `${backgroundImageSize}px` : "100%",
+              height: backgroundImageRepeat ? "auto" : "100%",
+              objectFit: backgroundImageRepeat ? "none" : "cover",
+              objectPosition: "center",
+            }}
+          />
+        )}
         <div
-          className={`flex w-full flex-col justify-center text-center max-h-48 pt-4 pb-3 px-3 rounded-lg ${props.resizeHeight ? "" : "sm:h-48 h-full"} ${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] " : ""}`}
+          className={`flex w-full flex-col justify-center text-center max-h-48 pt-4 pb-3 px-3 rounded-lg relative z-10 ${props.resizeHeight ? "" : "sm:h-48 h-full"} ${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] " : ""}`}
         >
           <div className="mx-auto pb-1">
             <PubIcon record={record} uri={props.uri} large />
diff --git a/components/ActionBar/Publications.tsx b/components/ActionBar/Publications.tsx
index 3be27318..fee908b7 100644
--- a/components/ActionBar/Publications.tsx
+++ b/components/ActionBar/Publications.tsx
@@ -102,15 +102,15 @@ export const PubIcon = (props: {
   let iconSizeClassName = `${props.small ? "w-4 h-4" : props.large ? "w-12 h-12" : "w-6 h-6"} rounded-full`;
 
   return props.record.icon ? (
-    <div
-      style={{
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        backgroundSize: "cover",
-        backgroundImage: `url(/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]})`,
-      }}
-      className={`${iconSizeClassName} ${props.className}`}
-    />
+    <div className={`${iconSizeClassName} ${props.className} relative overflow-hidden`}>
+      <img
+        src={`/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]}`}
+        alt={`${props.record.name} icon`}
+        loading="lazy"
+        fetchPriority="low"
+        className="absolute inset-0 w-full h-full object-cover object-center"
+      />
+    </div>
   ) : (
     <div className={`${iconSizeClassName} bg-accent-1 relative`}>
       <div
-- 
2.51.2