add smooth transition for marquee images after theyre loaded

dfinity · Nov 21, 2024 · 050279a · 050279a
1 parent c7cb1fd
commit 050279a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git 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
@@ -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 {