OperatorHub: Use browser-native support for lazy-loading images

Firefox, Chrome, and Edge all support native lazy-loading for images
with `loading="lazy"`. Prefer that over `react-lazyload` as it performs
better, removes a dependency, and avoids some problems we've seen
with images when filtering the catalog.

This does mean that Safari will not lazy-load images, but will
gracefully degrade. Lazy-loading is just an optimization. The worst
performance problems around image loading have been fixed upstream in
the OLM package server. In my testing, performance without lazy-loading
is not bad.

Firefox ESR 78 soon to be released will also support native lazy-loading.

frontend/package.json

@@ -115,7 +115,6 @@
     "react-draggable": "4.x",
     "react-helmet": "^5.2.1",
     "react-jsonschema-form": "1.7.0",
-    "react-lazyload": "^2.6.2",
     "react-linkify": "^0.2.2",
     "react-measure": "^2.2.6",
     "react-modal": "^3.4.1",

frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-items.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import * as _ from 'lodash';
-import LazyLoad from 'react-lazyload';
 import { CatalogItemHeader, CatalogTile } from '@patternfly/react-catalog-view-extension';
 import * as classNames from 'classnames';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
@@ -20,7 +19,6 @@ import {
 } from '@console/shared';
 import { history } from '@console/internal/components/utils/router';
 import { TileViewPage } from '@console/internal/components/utils/tile-view-page';
-import * as operatorLogo from '@console/internal/imgs/operator.svg';
 import { SubscriptionModel } from '../../models';
 import { OperatorHubItemDetails } from './operator-hub-item-details';
 import { communityOperatorWarningModal } from './operator-hub-community-provider-modal';
@@ -383,16 +381,7 @@ export const OperatorHubTileView: React.FC<OperatorHubTileViewProps> = (props) =
     const badges = [COMMUNITY_PROVIDER_TYPE, MARKETPLACE_PROVIDER_TYPE].includes(item.providerType)
       ? [badge(item.providerType)]
       : [];
-    const icon = (
-      <LazyLoad
-        offset={1000}
-        once
-        placeholder={<img className="catalog-tile-pf-icon" src={operatorLogo} alt="" />}
-        scrollContainer="#content-scrollable"
-      >
-        <img className="catalog-tile-pf-icon" src={imgUrl} alt="" />
-      </LazyLoad>
-    );
+    const icon = <img className="catalog-tile-pf-icon" loading="lazy" src={imgUrl} alt="" />;
     return (
       <CatalogTile
         className="co-catalog-tile"

frontend/public/jsx.d.ts

@@ -0,0 +1,8 @@
+import 'react';
+
+// Support the new `loading` attribute on images
+declare module 'react' {
+  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+    loading?: 'lazy' | 'eager' | 'auto';
+  }
+}

frontend/yarn.lock

@@ -14022,11 +14022,6 @@ react-jsonschema-form@1.7.0:
     react-lifecycles-compat "^3.0.4"
     shortid "^2.2.14"
 
-react-lazyload@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/react-lazyload/-/react-lazyload-2.6.2.tgz#6a1660de6e8653632797539189d19d64e924482c"
-  integrity sha512-zbFiwI3H7W0/Qvb6T/ew2NiGe2wj+soYNW7vv5Dte1eZuJDvvyUOHo8GpYfEeWoP5x4Rree2Hwop+lCISalBwg==
-
 react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"