From 6227013222be718e0a1fac8b01ec92f9f51d97e8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 1 Apr 2022 18:16:13 +0100
Subject: [PATCH] Remove flash on loading template pictures

---
 .../src/components/common/TemplateCard.svelte   | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/common/TemplateCard.svelte b/packages/builder/src/components/common/TemplateCard.svelte
index 1271f6aa24..5ab8c3d774 100644
--- a/packages/builder/src/components/common/TemplateCard.svelte
+++ b/packages/builder/src/components/common/TemplateCard.svelte
@@ -6,15 +6,10 @@
   export let overlayEnabled = true
 
   let imageError = false
-  let imageLoaded = false
 
   const imageRenderError = () => {
     imageError = true
   }
-
-  const imageLoadSuccess = () => {
-    imageLoaded = true
-  }
 </script>
 
 <div class="template-card" style="background-color:{backgroundColour};">
@@ -23,8 +18,7 @@
       alt={name}
       src={imageSrc}
       on:error={imageRenderError}
-      on:load={imageLoadSuccess}
-      class={`${imageLoaded ? "loaded" : ""}`}
+      class:error={imageError}
     />
     <div style={`display:${imageError ? "block" : "none"}`}>
       <svg
@@ -104,15 +98,14 @@
     width: 100%;
   }
 
-  .template-card img.loaded {
-    display: block;
-  }
-
   .template-card img {
-    display: none;
+    display: block;
     max-width: 100%;
     border-radius: var(--border-radius-s) 0px var(--border-radius-s) 0px;
   }
+  .template-card img.error {
+    display: none;
+  }
 
   .template-card:hover {
     background: var(--spectrum-alias-background-color-tertiary);