From 6cf8ebfdcc9f3e8a5ce9ea87da08bf44d7c3e357 Mon Sep 17 00:00:00 2001
From: Josh Dover <1813008+joshdover@users.noreply.github.com>
Date: Wed, 18 May 2022 20:07:30 +0200
Subject: [PATCH] [Fleet] Lazy load package icons in integrations grid
 (#132455)

---
 x-pack/plugins/fleet/public/components/package_icon.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/fleet/public/components/package_icon.tsx b/x-pack/plugins/fleet/public/components/package_icon.tsx
index 9e7b54673c9d9..7d106852324fe 100644
--- a/x-pack/plugins/fleet/public/components/package_icon.tsx
+++ b/x-pack/plugins/fleet/public/components/package_icon.tsx
@@ -16,7 +16,8 @@ export const PackageIcon: React.FunctionComponent<
   UsePackageIconType & Omit<EuiIconProps, 'type'>
 > = ({ packageName, integrationName, version, icons, tryApi, ...euiIconProps }) => {
   const iconType = usePackageIconType({ packageName, integrationName, version, icons, tryApi });
-  return <EuiIcon size="s" type={iconType} {...euiIconProps} />;
+  // @ts-expect-error loading="lazy" is not supported by EuiIcon
+  return <EuiIcon size="s" type={iconType} {...euiIconProps} loading="lazy" />;
 };
 
 export const CardIcon: React.FunctionComponent<UsePackageIconType & Omit<EuiIconProps, 'type'>> = (
@@ -26,7 +27,8 @@ export const CardIcon: React.FunctionComponent<UsePackageIconType & Omit<EuiIcon
   if (icons && icons.length === 1 && icons[0].type === 'eui') {
     return <EuiIcon size={'xl'} type={icons[0].src} {...props} />;
   } else if (icons && icons.length === 1 && icons[0].type === 'svg') {
-    return <EuiIcon size={'xl'} type={icons[0].src} {...props} />;
+    // @ts-expect-error loading="lazy" is not supported by EuiIcon
+    return <EuiIcon size={'xl'} type={icons[0].src} {...props} loading="lazy" />;
   } else {
     return <PackageIcon {...props} />;
   }