From 4dd645bbfaae34d9f813a38c129f0cefffc460f2 Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Mon, 28 Feb 2022 00:10:29 -0500
Subject: [PATCH] Hide card padders in image loader

---
 src/components/cardbuilder/cardBuilder.js |  6 ++++--
 src/components/images/imageLoader.js      | 10 ++++++++--
 src/components/images/style.scss          |  3 ++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index a7dceee54a..d46ee4cde1 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -1357,9 +1357,9 @@ import ServerConnections from '../ServerConnections';
             // TV Channel logos are transparent so skip the placeholder to avoid overlapping
             if (imgUrl && item.Type !== 'TvChannel') {
                 cardPadderIcon = getDefaultText(item, {
-                    ...options,
                     // Always use an icon
-                    defaultCardImageIcon: 'folder'
+                    defaultCardImageIcon: 'folder',
+                    ...options
                 });
             }
 
@@ -1529,6 +1529,8 @@ import ServerConnections from '../ServerConnections';
                     return '<span class="cardImageIcon material-icons collections" aria-hidden="true"></span>';
                 case 'Playlist':
                     return '<span class="cardImageIcon material-icons view_list" aria-hidden="true"></span>';
+                case 'Photo':
+                    return '<span class="cardImageIcon material-icons photo" aria-hidden="true"></span>';
                 case 'PhotoAlbum':
                     return '<span class="cardImageIcon material-icons photo_album" aria-hidden="true"></span>';
             }
diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js
index febd43b7b6..e25531a0ac 100644
--- a/src/components/images/imageLoader.js
+++ b/src/components/images/imageLoader.js
@@ -95,9 +95,12 @@ worker.addEventListener(
         const elem = event.target;
         requestAnimationFrame(() => {
             const canvas = elem.previousSibling;
-            if (elem.classList.contains('blurhashed') && canvas && canvas.tagName === 'CANVAS') {
+            if (elem.classList.contains('blurhashed') && canvas?.tagName === 'CANVAS') {
                 canvas.classList.add('lazy-hidden');
             }
+
+            // HACK: Hide the content of the card padder
+            elem.parentNode?.querySelector('.cardPadder')?.classList.add('lazy-hidden-children');
         });
         elem.removeEventListener('animationend', onAnimationEnd);
     }
@@ -135,10 +138,13 @@ worker.addEventListener(
     function emptyImageElement(elem) {
         elem.removeEventListener('animationend', onAnimationEnd);
         const canvas = elem.previousSibling;
-        if (canvas && canvas.tagName === 'CANVAS') {
+        if (canvas?.tagName === 'CANVAS') {
             canvas.classList.remove('lazy-hidden');
         }
 
+        // HACK: Unhide the content of the card padder
+        elem.parentNode?.querySelector('.cardPadder')?.classList.remove('lazy-hidden-children');
+
         let url;
 
         if (elem.tagName !== 'IMG') {
diff --git a/src/components/images/style.scss b/src/components/images/style.scss
index 9fae14fd0f..64726ae08a 100644
--- a/src/components/images/style.scss
+++ b/src/components/images/style.scss
@@ -18,7 +18,8 @@
     animation: fadein 0.1s;
 }
 
-.lazy-hidden {
+.lazy-hidden,
+.lazy-hidden-children * {
     opacity: 0;
 }