From 3e24bf640e4f061c27e8db0578f0036bea6866dd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 8 Aug 2024 18:23:38 +1000
Subject: [PATCH] fix(ui): give up on thumbnail loading, causes flash during
 transformer

---
 .../features/controlLayers/konva/CanvasImage.ts | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts
index c5c0e810d7..915510fe2a 100644
--- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasImage.ts
@@ -31,7 +31,6 @@ export class CanvasImageRenderer {
     placeholder: { group: Konva.Group; rect: Konva.Rect; text: Konva.Text };
     image: Konva.Image | null; // The image is loaded asynchronously, so it may not be available immediately
   };
-  thumbnailElement: HTMLImageElement | null = null;
   imageElement: HTMLImageElement | null = null;
   isLoading: boolean = false;
   isError: boolean = false;
@@ -98,13 +97,6 @@ export class CanvasImageRenderer {
         this.onFailedToLoadImage();
         return;
       }
-      // Load the thumbnail first, but let the image load in parallel
-      loadImage(imageDTO.thumbnail_url)
-        .then((thumbnailElement) => {
-          this.thumbnailElement = thumbnailElement;
-          this.updateImageElement();
-        })
-        .catch(this.onFailedToLoadImage);
 
       this.imageElement = await loadImage(imageDTO.image_url);
       await this.updateImageElement();
@@ -126,14 +118,13 @@ export class CanvasImageRenderer {
     const release = await this.mutex.acquire();
 
     try {
-      const element = this.imageElement ?? this.thumbnailElement;
-      const { width, height } = this.state.image;
+      if (this.imageElement) {
+        const { width, height } = this.state.image;
 
-      if (element) {
         if (this.konva.image) {
           this.log.trace('Updating Konva image attrs');
           this.konva.image.setAttrs({
-            image: element,
+            image: this.imageElement,
             width,
             height,
           });
@@ -142,7 +133,7 @@ export class CanvasImageRenderer {
           this.konva.image = new Konva.Image({
             name: CanvasImageRenderer.IMAGE_NAME,
             listening: false,
-            image: element,
+            image: this.imageElement,
             width,
             height,
           });