From ddc33ce6003e5934ae1c1765e31b94682f5bb47a Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 28 Aug 2025 23:41:33 -0400
Subject: [PATCH] prevent loading gigabytes of images when opening the gallery

---
 .../gallery-modal/src/lib/GalleryDraggableItem.tsx        | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx b/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx
index 0e257a3278..240fef44ec 100644
--- a/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx
+++ b/frontend/libs/components/gallery-modal/src/lib/GalleryDraggableItem.tsx
@@ -111,6 +111,10 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
             ) : (
               <img
                 data-gallery-draggable-1="true"
+                // NB: "loading=lazy" is necessary to prevent loading GIGABYTES of images!
+                // It is a bit finnicky, too: you must include this attribute 
+                // BEFORE the `src` attribute, or it won't work.
+                loading="lazy"
                 ref={imgRef}
                 src={item.thumbnail}
                 alt={item.label}
@@ -179,6 +183,10 @@ export const GalleryDraggableItem: React.FC<GalleryDraggableItemProps> = ({
               ) : (
                 <img
                   data-gallery-draggable-2="true"
+                  // NB: "loading=lazy" is necessary to prevent loading GIGABYTES of images!
+                  // It is a bit finnicky, too: you must include this attribute 
+                  // BEFORE the `src` attribute, or it won't work.
+                  loading="lazy"
                   ref={imgRef}
                   src={item.thumbnail}
                   alt={item.label}