[Fleet] Lazy load package icons in integrations grid (#132455)

(cherry picked from commit 6cf8ebf) # Conflicts: # x-pack/plugins/fleet/public/components/package_icon.tsx
elastic · May 30, 2022 · e517185 · e517185
1 parent 5995138
commit e517185
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/x-pack/plugins/fleet/public/components/package_icon.tsx b/x-pack/plugins/fleet/public/components/package_icon.tsx
@@ -15,7 +15,8 @@ import { usePackageIconType } from '../hooks';
 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'>> = (
@@ -25,7 +26,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} />;
   }