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

elastic · May 18, 2022 · 6cf8ebf · 6cf8ebf
1 parent 03617b4
commit 6cf8ebf
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
@@ -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} />;
   }