From 487ed99b4c63763252e0734b0803a9da986b11a8 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 19 Sep 2026 13:30:22 +0300
Subject: [PATCH] Fix art details & buttons hidden in some cases

---
 app/features/art/components/ArtGrid.tsx       | 40 ++++++++++++++++---
 .../2026-09-19-art-details-stay-hidden.md     |  5 +++
 2 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 changelog/2026-09-19-art-details-stay-hidden.md

diff --git a/app/features/art/components/ArtGrid.tsx b/app/features/art/components/ArtGrid.tsx
index 5a23bb8d0..0a97ae812 100644
--- a/app/features/art/components/ArtGrid.tsx
+++ b/app/features/art/components/ArtGrid.tsx
@@ -84,7 +84,7 @@ export function ArtGrid({
 }
 
 function BigImageDialog({ close, art }: { close: () => void; art: ListedArt }) {
-	const [imageSettled, setImageSettled] = React.useState(false);
+	const [imageSettled, imageRef] = useImageSettled();
 	const { formatter } = useDateTimeFormat({
 		year: "numeric",
 		month: "numeric",
@@ -102,8 +102,7 @@ function BigImageDialog({ close, art }: { close: () => void; art: ListedArt }) {
 				src={art.url}
 				loading="lazy"
 				className={styles.dialogImg}
-				onLoad={() => setImageSettled(true)}
-				onError={() => setImageSettled(true)}
+				ref={imageRef}
 			/>
 			{art.tags || art.linkedUsers ? (
 				<div
@@ -163,7 +162,7 @@ function ImagePreview({
 }) {
 	const canEdit = useHasPermission(art, "EDIT");
 	const canUnlink = useHasPermission(art, "UNLINK");
-	const [imageSettled, setImageSettled] = React.useState(false);
+	const [imageSettled, imageRef] = useImageSettled();
 	const { t } = useTranslation(["common", "art"]);
 	const formatDistanceToNow = useFormatDistanceToNow();
 
@@ -174,8 +173,7 @@ function ImagePreview({
 			src={previewUrl(art.url)}
 			loading="lazy"
 			onClick={onClick}
-			onLoad={() => setImageSettled(true)}
-			onError={() => setImageSettled(true)}
+			ref={imageRef}
 			className={enablePreview ? styles.thumbnail : undefined}
 			data-testid="art-image"
 		/>
@@ -301,3 +299,33 @@ function ImagePreview({
 		</Link>
 	);
 }
+
+/**
+ * Whether the image has finished loading (or failed to), and the ref to give it.
+ *
+ * Native listeners rather than `onLoad`/`onError` because React drops those
+ * events when the image settles right after mounting, e.g. when it comes from
+ * the browser cache.
+ */
+function useImageSettled() {
+	const [imageSettled, setImageSettled] = React.useState(false);
+
+	const imageRef = (image: HTMLImageElement | null) => {
+		if (!image) return;
+		if (image.complete) {
+			setImageSettled(true);
+			return;
+		}
+
+		const settle = () => setImageSettled(true);
+		image.addEventListener("load", settle);
+		image.addEventListener("error", settle);
+
+		return () => {
+			image.removeEventListener("load", settle);
+			image.removeEventListener("error", settle);
+		};
+	};
+
+	return [imageSettled, imageRef] as const;
+}
diff --git a/changelog/2026-09-19-art-details-stay-hidden.md b/changelog/2026-09-19-art-details-stay-hidden.md
new file mode 100644
index 000000000..5496af0cd
--- /dev/null
+++ b/changelog/2026-09-19-art-details-stay-hidden.md
@@ -0,0 +1,5 @@
+---
+navItem: art
+type: bug
+---
+Fixed art details and buttons sometimes staying hidden after the image had loaded