refactor: replace Progressing component with Icon in GenericSectionErrorState; add lazy loading to images in ImageWithFallback; enhance type definitions for imageProps and ScannedByToolModal

Author: AbhishekA1509

src/Shared/Components/GenericSectionErrorState/GenericSectionErrorState.component.tsx

@@ -16,9 +16,9 @@
 
 import { ReactNode } from 'react'
 import { ComponentSizeType } from '@Shared/constants'
-import { Progressing } from '@Common/Progressing'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as ICInfoOutline } from '@Icons/ic-info-outline.svg'
+import { Icon } from '../Icon'
 import { Button, ButtonVariantType } from '../Button'
 import { GenericSectionErrorStateProps } from './types'
 
@@ -35,7 +35,7 @@ const GenericSectionErrorState = ({
 }: GenericSectionErrorStateProps) => {
     const renderMarker = () => {
         if (progressingProps) {
-            return <Progressing {...progressingProps} />
+            return <Icon name="ic-circle-loader" {...progressingProps} />
         }
 
         if (useInfoIcon) {

src/Shared/Components/GenericSectionErrorState/types.ts

@@ -15,7 +15,7 @@
  */
 
 import { ReactNode } from 'react'
-import { ProgressingProps } from '@Common/Types'
+import { IconsProps } from '../Icon'
 
 export type GenericSectionErrorStateProps = {
     /**
@@ -51,10 +51,10 @@ export type GenericSectionErrorStateProps = {
 } & (
     | {
           /**
-           * If provided, would render the Progressing component with given props instead of error icon
+           * If provided, Icon with ic-circle-loader
            */
-          progressingProps: ProgressingProps
-          useInfoIcon?: never
+          progressingProps: Omit<IconsProps, 'name'>
+          useInfoIcon?: false
       }
     | {
           progressingProps?: never
@@ -63,7 +63,7 @@ export type GenericSectionErrorStateProps = {
            *
            * @default false
            */
-          useInfoIcon: boolean
+          useInfoIcon: true
       }
     | {
           progressingProps?: never

src/Shared/Components/ImageWithFallback/ImageWithFallback.component.tsx

@@ -40,7 +40,13 @@ const ImageWithFallback = ({ imageProps, fallbackImage }: ImageWithFallbackProps
         // eslint-disable-next-line react/jsx-no-useless-fragment
         <>
             {imageUrl || (!imageUrl && typeof fallbackImage === 'string') ? (
-                <img alt="" {...imageProps} src={imageUrl || (fallbackImage as string)} onError={handleImageError} />
+                <img
+                    loading="lazy"
+                    alt=""
+                    {...imageProps}
+                    src={imageUrl || (fallbackImage as string)}
+                    onError={handleImageError}
+                />
             ) : (
                 fallbackImage
             )}

src/Shared/Components/ImageWithFallback/types.ts

@@ -20,7 +20,8 @@ export interface ImageWithFallbackProps {
     /**
      * Props for the image
      */
-    imageProps: ImgHTMLAttributes<HTMLImageElement>
+    imageProps: Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'height' | 'width'> &
+        Required<Pick<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'height' | 'width'>>
     /**
      * Fallback image; can be a url or a jsx element
      */

src/Shared/Components/ScannedByToolModal/ScannedByToolModal.tsx

@@ -37,6 +37,8 @@ const ScannedByToolModal: React.FC<ScannedByToolModalProps> = ({
                 src: scanToolUrl,
                 className: 'icon-dim-20-imp',
                 alt: 'scan-tool',
+                height: 20,
+                width: 20,
             }}
             fallbackImage={<ICScanFallback className="icon-dim-20-imp dc__no-shrink" />}
         />

src/Shared/Components/SelectPicker/common.tsx

@@ -195,6 +195,8 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
         selectOption(data)
     }
 
+    const iconBaseClass = 'dc__no-shrink icon-dim-16 flex dc__fill-available-space'
+
     return (
         <components.Option {...props}>
             <Tooltip {...getTooltipProps(tooltipProps)}>
@@ -210,9 +212,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                         />
                     )}
                     <div className={`flex left w-100 ${showDescription ? 'top' : ''} dc__gap-8`}>
-                        {startIcon && (
-                            <div className="dc__no-shrink icon-dim-16 flex dc__fill-available-space">{startIcon}</div>
-                        )}
+                        {startIcon && <div className={`${iconBaseClass} mt-2`}>{startIcon}</div>}
                         <div className="flex-grow-1">
                             <Tooltip content={label} placement="right">
                                 <h4
@@ -233,9 +233,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                                     <div className="fs-12 lh-18">{description}</div>
                                 ))}
                         </div>
-                        {endIcon && (
-                            <div className="dc__no-shrink icon-dim-16 flex dc__fill-available-space">{endIcon}</div>
-                        )}
+                        {endIcon && <div className={iconBaseClass}>{endIcon}</div>}
                     </div>
                 </div>
             </Tooltip>