Revert "Switch image previews to loaded URLs"

This reverts commit 9b99184ceea9451f3a8ab1f877ae6e67b0d83a26.

web/src/app/image/components/image-results.tsx

@@ -24,7 +24,6 @@ type ImageResultsProps = {
   onReuseTurnConfig: (conversationId: string, turnId: string) => void | Promise<void>;
   onRegenerateTurn: (conversationId: string, turnId: string) => void | Promise<void>;
   onRetryImage: (conversationId: string, turnId: string, imageId: string) => void | Promise<void>;
-  onImageUrlReady: (conversationId: string, turnId: string, imageId: string) => void | Promise<void>;
   formatConversationTime: (value: string) => string;
 };
 
@@ -65,7 +64,6 @@ export function ImageResults({
   onReuseTurnConfig,
   onRegenerateTurn,
   onRetryImage,
-  onImageUrlReady,
   formatConversationTime,
 }: ImageResultsProps) {
   const [imageDimensions, setImageDimensions] = useState<Record<string, string>>({});
@@ -83,6 +81,42 @@ export function ImageResults({
     return () => window.clearInterval(timer);
   }, [hasPendingTurns]);
 
+  useEffect(() => {
+    const pendingImages =
+      selectedConversation?.turns.flatMap((turn) =>
+        turn.images.flatMap((image) => {
+          const url = normalizeImageUrl(image.url || "");
+          if (image.status !== "success" || !image.b64_json || !url || urlReadyImageIds[image.id]) {
+            return [];
+          }
+          return [{ id: image.id, url }];
+        }),
+      ) || [];
+    if (pendingImages.length === 0) {
+      return;
+    }
+
+    let cancelled = false;
+    const loaders = pendingImages.map(({ id, url }) => {
+      const loader = new Image();
+      loader.onload = () => {
+        if (cancelled) {
+          return;
+        }
+        setUrlReadyImageIds((current) => (current[id] ? current : { ...current, [id]: true }));
+      };
+      loader.src = url;
+      return loader;
+    });
+
+    return () => {
+      cancelled = true;
+      loaders.forEach((loader) => {
+        loader.onload = null;
+      });
+    };
+  }, [selectedConversation, urlReadyImageIds]);
+
   const updateImageDimensions = (id: string, width: number, height: number) => {
     const dimensions = formatImageDimensions(width, height);
     setImageDimensions((current) => {
@@ -93,11 +127,6 @@ export function ImageResults({
     });
   };
 
-  const markImageUrlReady = (conversationId: string, turnId: string, imageId: string) => {
-    setUrlReadyImageIds((current) => (current[imageId] ? current : { ...current, [imageId]: true }));
-    void onImageUrlReady(conversationId, turnId, imageId);
-  };
-
   if (!selectedConversation) {
     return (
       <div className="flex h-full min-h-[260px] items-center justify-center text-center sm:min-h-[420px]">
@@ -229,23 +258,13 @@ export function ImageResults({
                         const currentIndex = successfulTurnImages.findIndex((item) => item.id === image.id);
                         const sizeLabel = image.b64_json ? formatBase64ImageSize(image.b64_json) : "";
                         const dimensions = imageDimensions[image.id];
-                        const urlSrc = normalizeImageUrl(image.url || "");
                         const imageMeta = [sizeLabel, dimensions].filter(Boolean).join(" · ");
 
                         return (
                           <div
                             key={image.id}
-                            className="relative break-inside-avoid"
+                            className="break-inside-avoid"
                           >
-                            {image.b64_json && urlSrc && !urlReadyImageIds[image.id] ? (
-                              <img
-                                src={urlSrc}
-                                alt=""
-                                aria-hidden="true"
-                                className="pointer-events-none absolute size-px opacity-0"
-                                onLoad={() => markImageUrlReady(selectedConversation.id, turn.id, image.id)}
-                              />
-                            ) : null}
                             <button
                               type="button"
                               onClick={() => onOpenLightbox(successfulTurnImages, currentIndex)}

web/src/app/image/page.tsx

@@ -759,39 +759,6 @@ function ImagePageContent({ session }: { session: StoredAuthSession }) {
     clearComposerInputs();
   }, [clearComposerInputs]);
 
-  const handleImageUrlReady = useCallback(
-    async (conversationId: string, turnId: string, imageId: string) => {
-      const snapshot = conversationsRef.current.find((item) => item.id === conversationId);
-      if (!snapshot) {
-        return;
-      }
-
-      await updateConversation(conversationId, (current) => {
-        const conversation = current ?? snapshot;
-        let changed = false;
-        const turns = conversation.turns.map((turn) => {
-          if (turn.id !== turnId) {
-            return turn;
-          }
-          const images = turn.images.map((image) => {
-            if (image.id !== imageId || !image.b64_json || !image.url) {
-              return image;
-            }
-            changed = true;
-            return {
-              ...image,
-              b64_json: undefined,
-            };
-          });
-          return changed ? { ...turn, images } : turn;
-        });
-
-        return changed ? { ...conversation, turns } : conversation;
-      });
-    },
-    [updateConversation],
-  );
-
   const handleCreateDraft = () => {
     setSelectedConversationId(null);
     resetComposer();
@@ -1571,7 +1538,6 @@ function ImagePageContent({ session }: { session: StoredAuthSession }) {
               onReuseTurnConfig={handleReuseTurnConfig}
               onRegenerateTurn={handleRegenerateTurn}
               onRetryImage={handleRetryImage}
-              onImageUrlReady={handleImageUrlReady}
               formatConversationTime={formatConversationTime}
             />
           </div>