a tool for shared writing and social publishing
add lazy loading for pub icon and bg images
Jared Pereira
(Oct 28, 2025, 7:44 PM EDT)
b10ebf6e
3f255e4d
+27
-16
+9
-9
components/ActionBar/Publications.tsx
+9
-9
components/ActionBar/Publications.tsx
···
102
102
let iconSizeClassName = `${props.small ? "w-4 h-4" : props.large ? "w-12 h-12" : "w-6 h-6"} rounded-full`;
103
103
104
104
return props.record.icon ? (
105
-
<div
106
-
style={{
107
-
backgroundRepeat: "no-repeat",
108
-
backgroundPosition: "center",
109
-
backgroundSize: "cover",
110
-
backgroundImage: `url(/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]})`,
111
-
}}
112
-
className={`${iconSizeClassName} ${props.className}`}
113
-
/>
105
+
<div className={`${iconSizeClassName} ${props.className} relative overflow-hidden`}>
106
+
<img
107
+
src={`/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]}`}
108
+
alt={`${props.record.name} icon`}
109
+
loading="lazy"
110
+
fetchPriority="low"
111
+
className="absolute inset-0 w-full h-full object-cover object-center"
112
+
/>
113
+
</div>
114
114
) : (
115
115
<div className={`${iconSizeClassName} bg-accent-1 relative`}>
116
116
<div
+18
-7
app/(home-pages)/discover/PubListing.tsx
+18
-7
app/(home-pages)/discover/PubListing.tsx
···
31
31
<BaseThemeProvider {...theme} local>
32
32
<a
33
33
href={`https://${record.base_path}`}
34
-
style={{
35
-
backgroundImage: `url(${backgroundImage})`,
36
-
backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
37
-
backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
38
-
}}
39
34
className={`no-underline! flex flex-row gap-2
40
35
bg-bg-leaflet
41
36
border border-border-light rounded-lg
42
37
px-3 py-3 selected-outline
43
-
hover:outline-accent-contrast hover:border-accent-contrast`}
38
+
hover:outline-accent-contrast hover:border-accent-contrast
39
+
relative overflow-hidden`}
44
40
>
41
+
{backgroundImage && (
42
+
<img
43
+
src={backgroundImage}
44
+
alt=""
45
+
loading="lazy"
46
+
fetchPriority="low"
47
+
className="absolute inset-0 pointer-events-none"
48
+
style={{
49
+
width: backgroundImageRepeat ? `${backgroundImageSize}px` : "100%",
50
+
height: backgroundImageRepeat ? "auto" : "100%",
51
+
objectFit: backgroundImageRepeat ? "none" : "cover",
52
+
objectPosition: "center",
53
+
}}
54
+
/>
55
+
)}
45
56
<div
46
-
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))] " : ""}`}
57
+
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))] " : ""}`}
47
58
>
48
59
<div className="mx-auto pb-1">
49
60
<PubIcon record={record} uri={props.uri} large />