From 050279a00c92e1c9db94a78fff5869e8af0c93c2 Mon Sep 17 00:00:00 2001
From: Andri Schatz <andri.schatz@dfinity.org>
Date: Thu, 21 Nov 2024 13:58:10 +0100
Subject: [PATCH] add smooth transition for marquee images after theyre loaded

---
 src/frontend/src/flows/dappsExplorer/teaser.ts | 11 ++++++++++-
 src/frontend/src/styles/main.css               |  9 +++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/flows/dappsExplorer/teaser.ts b/src/frontend/src/flows/dappsExplorer/teaser.ts
index e70d991c35..c858362eec 100644
--- a/src/frontend/src/flows/dappsExplorer/teaser.ts
+++ b/src/frontend/src/flows/dappsExplorer/teaser.ts
@@ -76,7 +76,16 @@ const marqueeList = (dapps: KnownDapp[]): TemplateResult => {
         // later.
         ({ logoSrc, name }) => html`<div class="c-marquee__item">
           <div class="c-marquee__image-container">
-            <img src=${logoSrc} alt="${name}" class="c-marquee__image" />
+            <img
+              src=${logoSrc}
+              alt="${name}"
+              class="c-marquee__image c-marquee__image--loading"
+              @load=${(e: Event) => {
+                const img = e.target as HTMLImageElement;
+                img.classList.remove('c-marquee__image--loading');
+                img.classList.add('c-marquee__image--loaded');
+              }}
+            />
           </div>
         </div>`
       );
diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
index 7023bfa81d..297da81635 100644
--- a/src/frontend/src/styles/main.css
+++ b/src/frontend/src/styles/main.css
@@ -3251,6 +3251,15 @@ input[type="checkbox"] {
   height: 100%;
   width: 100%;
   object-fit: contain;
+  transition: opacity 0.3s ease-in;
+}
+
+.c-marquee__image--loading {
+  opacity: 0;
+}
+
+.c-marquee__image--loaded {
+  opacity: 1;
 }
 
 @keyframes marquee {