refactor: use React 19 use hook in IconResolver

shivamG640 · shivamG640 · commit e08ba610db8a · 2026-04-09T17:40:04.000+05:30
diff --git a/packages/ui/src/components/Catalog/DataListItem.tsx b/packages/ui/src/components/Catalog/DataListItem.tsx
@@ -9,7 +9,7 @@ import {
   GridItem,
   LabelGroup,
 } from '@patternfly/react-core';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, Suspense } from 'react';
 
 import { CatalogKind } from '../../models/catalog-kind';
 import { IconResolver } from '../IconResolver';
@@ -55,11 +55,13 @@ export const CatalogDataListItem: FunctionComponent<ICatalogDataListItemProps> =
               <Grid>
                 <GridItem sm={12} md={6} order={titleElementOrder}>
                   <div className="catalog-data-list-item__title-div-left">
-                    <IconResolver
-                      className="catalog-data-list-item__title-div-left__icon"
-                      catalogKind={props.tile.type as CatalogKind}
-                      name={props.tile.name}
-                    />
+                    <Suspense fallback={null}>
+                      <IconResolver
+                        className="catalog-data-list-item__title-div-left__icon"
+                        catalogKind={props.tile.type as CatalogKind}
+                        name={props.tile.name}
+                      />
+                    </Suspense>
                     <span id="clickable-action-item1" className="catalog-data-list-item__title-div-left__title">
                       {props.tile.title}
                     </span>
diff --git a/packages/ui/src/components/Catalog/Tile.tsx b/packages/ui/src/components/Catalog/Tile.tsx
@@ -1,7 +1,7 @@
 import './Tile.scss';
 
 import { Card, CardBody, CardFooter, CardHeader, CardTitle, LabelGroup } from '@patternfly/react-core';
-import { FunctionComponent, PropsWithChildren, useCallback } from 'react';
+import { FunctionComponent, PropsWithChildren, Suspense, useCallback } from 'react';
 
 import { CatalogKind } from '../../models/catalog-kind';
 import { IconResolver } from '../IconResolver';
@@ -35,7 +35,9 @@ export const Tile: FunctionComponent<PropsWithChildren<TileProps>> = (props) =>
         onClick={onTileClick}
       >
         <div className="tile__header">
-          <IconResolver className="tile__icon" catalogKind={props.tile.type as CatalogKind} name={props.tile.name} />
+          <Suspense fallback={null}>
+            <IconResolver className="tile__icon" catalogKind={props.tile.type as CatalogKind} name={props.tile.name} />
+          </Suspense>
           <LabelGroup isCompact aria-label="tile-headers-tags">
             {props.tile.headerTags?.map((tag, index) => (
               <CatalogTag key={`${props.tile.name}-${tag}-${index}`} tag={tag} />
diff --git a/packages/ui/src/components/IconResolver/IconResolver.tsx b/packages/ui/src/components/IconResolver/IconResolver.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, PropsWithChildren, useEffect, useState } from 'react';
+import { FunctionComponent, PropsWithChildren, use, useMemo } from 'react';
 
 import { CatalogKind } from '../../models/catalog-kind';
 import { NodeIconResolver } from './node-icon-resolver';
@@ -10,54 +10,54 @@ interface IconResolverProps {
   alt?: string;
 }
 
+function getIconRequest(catalogKind: CatalogKind, name: string, altProps?: string) {
+  switch (catalogKind) {
+    case CatalogKind.Entity:
+      return {
+        iconPromise: NodeIconResolver.getIcon(name, catalogKind),
+        alt: altProps ?? 'Entity icon',
+      };
+    case CatalogKind.Kamelet:
+      return {
+        iconPromise: NodeIconResolver.getIcon(`kamelet:${name}`, catalogKind),
+        alt: altProps ?? 'Kamelet icon',
+      };
+    case CatalogKind.TestAction:
+    case CatalogKind.TestActionGroup:
+    case CatalogKind.TestContainer:
+    case CatalogKind.TestEndpoint:
+    case CatalogKind.TestFunction:
+    case CatalogKind.TestValidationMatcher:
+      return {
+        iconPromise: NodeIconResolver.getIcon(name, catalogKind),
+        alt: altProps ?? `Test ${catalogKind.substring('test'.length)} icon`,
+      };
+    case CatalogKind.Processor:
+    case CatalogKind.Pattern:
+    case CatalogKind.Component:
+      return {
+        iconPromise: NodeIconResolver.getIcon(name, catalogKind),
+        alt: altProps ?? `${catalogKind} icon`,
+      };
+    default:
+      return {
+        iconPromise: Promise.resolve(NodeIconResolver.getDefaultCamelIcon()),
+        alt: altProps ?? 'Default icon',
+      };
+  }
+}
+
 export const IconResolver: FunctionComponent<PropsWithChildren<IconResolverProps>> = ({
   catalogKind,
   name,
   className,
   alt: altProps,
 }) => {
-  const [icon, setIcon] = useState<string | undefined>(undefined);
-  const [altText, setAltText] = useState<string | undefined>(altProps);
-
-  useEffect(() => {
-    let iconName: string;
-    let alt: string;
-
-    switch (catalogKind) {
-      case CatalogKind.Entity:
-        iconName = name;
-        alt = altProps ?? 'Entity icon';
-        break;
-      case CatalogKind.Kamelet:
-        iconName = `kamelet:${name}`;
-        alt = altProps ?? 'Kamelet icon';
-        break;
-      case CatalogKind.TestAction:
-      case CatalogKind.TestActionGroup:
-      case CatalogKind.TestContainer:
-      case CatalogKind.TestEndpoint:
-      case CatalogKind.TestFunction:
-      case CatalogKind.TestValidationMatcher:
-        iconName = name;
-        alt = altProps ?? `Test ${catalogKind.substring('test'.length)} icon`;
-        break;
-      case CatalogKind.Processor:
-      case CatalogKind.Pattern:
-      case CatalogKind.Component:
-        iconName = name;
-        alt = altProps ?? `${catalogKind} icon`;
-        break;
-      default:
-        setIcon(NodeIconResolver.getDefaultCamelIcon());
-        return;
-    }
-
-    NodeIconResolver.getIcon(iconName, catalogKind).then((icon) => {
-      setIcon(icon);
-      setAltText(alt);
-    });
-  }, [altProps, catalogKind, name]);
+  const { iconPromise, alt } = useMemo(
+    () => getIconRequest(catalogKind, name, altProps),
+    [catalogKind, name, altProps],
+  );
+  const icon = use(iconPromise);
 
-  if (!icon) return null;
-  return <img className={className} src={icon} alt={altText} />;
+  return <img className={className} src={icon} alt={alt} />;
 };
diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx b/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx
@@ -1,7 +1,7 @@
 import './PropertiesModal.scss';
 
 import { Modal, ModalBody, ModalHeader, Tab, Tabs } from '@patternfly/react-core';
-import { FunctionComponent, ReactElement, useContext, useEffect, useState } from 'react';
+import { FunctionComponent, ReactElement, Suspense, useContext, useEffect, useState } from 'react';
 
 import { CatalogContext } from '../../dynamic-catalog/catalog.provider';
 import { CatalogKind } from '../../models/catalog-kind';
@@ -97,12 +97,14 @@ export const PropertiesModal: FunctionComponent<IPropertiesModalProps> = (props)
 
   const title: ReactElement = (
     <div className="properties-modal__title-div">
-      <IconResolver
-        alt={`${props.tile.type} icon`}
-        className={'properties-modal__title-image'}
-        catalogKind={props.tile.type as CatalogKind}
-        name={props.tile.name}
-      />
+      <Suspense fallback={null}>
+        <IconResolver
+          alt={`${props.tile.type} icon`}
+          className={'properties-modal__title-image'}
+          catalogKind={props.tile.type as CatalogKind}
+          name={props.tile.name}
+        />
+      </Suspense>
       <h1 className="properties-modal__title">{props.tile.title}</h1>
     </div>
   );
diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormHeader.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasFormHeader.tsx
@@ -3,7 +3,7 @@ import './CanvasFormHeader.scss';
 import { CanvasFormTabsContext, FilteredFieldContext, FormTabsModes } from '@kaoto/forms';
 import { Button, Grid, GridItem, SearchInput, Title, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
-import { FunctionComponent, useContext } from 'react';
+import { FunctionComponent, Suspense, useContext } from 'react';
 
 import { CatalogKind } from '../../../../models';
 import { IconResolver } from '../../../IconResolver';
@@ -30,7 +30,9 @@ export const CanvasFormHeader: FunctionComponent<CanvasFormHeaderProps> = ({
     <>
       <Grid hasGutter>
         <GridItem className="form-header" span={11}>
-          <IconResolver className={`form-header__icon-${nodeId}`} catalogKind={catalogKind} name={name} />
+          <Suspense fallback={null}>
+            <IconResolver className={`form-header__icon-${nodeId}`} catalogKind={catalogKind} name={name} />
+          </Suspense>
 
           <Title className="form-header__title" headingLevel="h2">
             {title}
diff --git a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx
@@ -25,7 +25,7 @@ import {
   useHover,
 } from '@patternfly/react-topology';
 import clsx from 'clsx';
-import { FunctionComponent, useContext, useMemo, useRef } from 'react';
+import { FunctionComponent, Suspense, useContext, useMemo, useRef } from 'react';
 
 import { CatalogModalContext } from '../../../../dynamic-catalog/catalog-modal.provider';
 import { useProcessorIcon } from '../../../../hooks/processor-icon.hook';
@@ -221,11 +221,13 @@ export const CustomGroupExpandedInner: FunctionComponent<CustomGroupProps> = obs
                 {doesHaveWarnings ? (
                   <div className="custom-group__container__icon-placeholder" />
                 ) : (
-                  <IconResolver
-                    alt={tooltipContent}
-                    catalogKind={groupVizNode.data.catalogKind}
-                    name={groupVizNode.data.name}
-                  />
+                  <Suspense fallback={null}>
+                    <IconResolver
+                      alt={tooltipContent}
+                      catalogKind={groupVizNode.data.catalogKind}
+                      name={groupVizNode.data.name}
+                    />
+                  </Suspense>
                 )}
                 <span title={label}>{label}</span>
 
diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNodeContainer.tsx b/packages/ui/src/components/Visualization/Custom/Node/CustomNodeContainer.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '@patternfly/react-core';
 import { BanIcon } from '@patternfly/react-icons';
 import clsx from 'clsx';
-import { ElementType, FunctionComponent, Ref } from 'react';
+import { ElementType, FunctionComponent, Ref, Suspense } from 'react';
 
 import { IVisualizationNode } from '../../../../models';
 import { IconResolver } from '../../../IconResolver';
@@ -47,7 +47,9 @@ export const CustomNodeContainer: FunctionComponent<CustomNodeContainerProps> =
   >
     <div data-testid={dataTestId} className={clsx('custom-node__container', containerClassNames)}>
       <div title={tooltipContent} className="custom-node__container__image">
-        <IconResolver alt={tooltipContent} catalogKind={vizNode.data.catalogKind} name={vizNode.data.name} />
+        <Suspense fallback={null}>
+          <IconResolver alt={tooltipContent} catalogKind={vizNode.data.catalogKind} name={vizNode.data.name} />
+        </Suspense>
 
         {childCount > 0 && (
           <FloatingCircle className="step-icon step-icon__processor">
