From 3c4b4c378609c2fd25f39db7826ecffe6c3d67e3 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Tue, 29 Jun 2021 11:01:10 +0200
Subject: [PATCH] MOBILE-3320 format-text: Improve missing images

---
 src/core/directives/format-text.ts    | 9 +++++++++
 src/theme/components/format-text.scss | 4 ++++
 src/theme/theme.base.scss             | 5 -----
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts
index cf341587d..cfcdfa2c6 100644
--- a/src/core/directives/format-text.ts
+++ b/src/core/directives/format-text.ts
@@ -224,6 +224,7 @@ export class CoreFormatTextDirective implements OnChanges {
             const button = document.createElement('button');
 
             button.classList.add('core-image-viewer-icon');
+            button.classList.add('hidden');
             button.setAttribute('aria-label', label);
             // Add an ion-icon item to apply the right styles, but the ion-icon component won't be executed.
             button.innerHTML = '<ion-icon name="fas-search" aria-hidden="true" src="assets/fonts/font-awesome/solid/search.svg">\
@@ -236,6 +237,14 @@ export class CoreFormatTextDirective implements OnChanges {
             });
 
             img.parentNode?.appendChild(button);
+
+            if (img.complete && img.naturalWidth > 0) {
+                // Image has already loaded, show the button.
+                button.classList.remove('hidden');
+            } else {
+                // Show the button when the image is loaded.
+                img.onload = () => button.classList.remove('hidden');
+            }
         });
     }
 
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index a46570e14..197e58196 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -189,6 +189,10 @@ core-format-text {
         &:hover {
             opacity: .7;
         }
+
+        &.hidden {
+            display: none;
+        }
     }
 }
 
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index adb9cf7f8..f5bbd0396 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -521,11 +521,6 @@ ion-avatar ion-img, ion-avatar img {
 img[core-external-content]:not([src]) {
     visibility: hidden;
 }
-img[alt] {
-    text-indent: -999999px;
-    white-space: nowrap;
-    overflow: hidden;
-}
 
 // Activity modules
 .core-module-icon {