From 829212a76a52bf36984bf9efde089ef26aa77e8d Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Wed, 24 Jul 2024 09:53:26 -0500
Subject: [PATCH] lightbox: Set payload.source on srcset.

This eliminates a flash of the smaller/blurrier preview image when
navigating to images that have already been loaded in full.
---
 web/src/lightbox.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/lightbox.ts b/web/src/lightbox.ts
index c7bc7e733a..cd6d9ab81f 100644
--- a/web/src/lightbox.ts
+++ b/web/src/lightbox.ts
@@ -268,11 +268,15 @@ function display_image(payload: Payload): void {
         $img.attr("src", payload.preview);
         $img.attr("width", payload.original_width_px);
         $img.attr("height", payload.original_height_px);
-        $img.one("load", () => {
-            $img.attr("src", payload.source);
-        });
+        // srcset contains the reference to the original image,
+        // and will be preferred over the src image when available
+        $img.attr("srcset", `${payload.source} ${payload.original_width_px}w`);
+        $img.attr("sizes", "100vw");
     } else {
-        $img.attr("src", payload.source);
+        // this could be just assigned to src, but srcset is used here
+        // for consistency
+        $img.attr("srcset", `${payload.source} ${payload.original_width_px}w`);
+        $img.attr("sizes", "100vw");
     }
     $img_container.empty();
     $img_container.append($img).show();