From 2dbe4e116f0f71a7a0c7931abd634cea3d806904 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Tue, 25 Oct 2022 18:12:13 +0200
Subject: [PATCH] fix loading state

---
 .../files/public/components/image/components/img.tsx     | 9 +++++++--
 x-pack/plugins/files/public/components/image/image.tsx   | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/files/public/components/image/components/img.tsx b/x-pack/plugins/files/public/components/image/components/img.tsx
index 953eb93a19917..25f45eec22f6e 100644
--- a/x-pack/plugins/files/public/components/image/components/img.tsx
+++ b/x-pack/plugins/files/public/components/image/components/img.tsx
@@ -13,19 +13,24 @@ import { sizes } from '../styles';
 
 export interface Props extends ImgHTMLAttributes<HTMLImageElement> {
   size?: EuiImageSize;
+  hidden: boolean;
   observerRef: (el: null | HTMLImageElement) => void;
 }
 
 export const Img = React.forwardRef<HTMLImageElement, Props>(
-  ({ observerRef, src, size, ...rest }, ref) => {
+  ({ observerRef, src, size, hidden, ...rest }, ref) => {
     const { euiTheme } = useEuiTheme();
     const styles = [
       css`
         transition: opacity ${euiTheme.animation.extraFast};
       `,
-      !src
+      hidden
         ? css`
             visibility: hidden;
+          `
+        : undefined,
+      !src
+        ? css`
             position: absolute; // ensure that empty img tag occupies full container
             top: 0;
             right: 0;
diff --git a/x-pack/plugins/files/public/components/image/image.tsx b/x-pack/plugins/files/public/components/image/image.tsx
index e353fced3ec3e..0b6c9d48fa81d 100644
--- a/x-pack/plugins/files/public/components/image/image.tsx
+++ b/x-pack/plugins/files/public/components/image/image.tsx
@@ -90,6 +90,7 @@ export const Image = React.forwardRef<HTMLImageElement, Props>(
           size={size}
           src={isVisible ? src : undefined}
           alt={alt}
+          hidden={!isLoaded}
           onLoad={(ev) => {
             setIsLoaded(true);
             onLoad?.(ev);