[EmptyState/Image] Fix image loading with ref

.changeset/gorgeous-tomatoes-push.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added support for ref to `Image` to handle image load with `EmptyState`

polaris-react/src/components/EmptyState/EmptyState.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useCallback} from 'react';
+import React, {useState, useRef, useEffect} from 'react';
 
 import {classNames} from '../../utilities/css';
 import type {ComplexAction} from '../../types';
@@ -47,9 +47,10 @@ export function EmptyState({
   footerContent,
 }: EmptyStateProps) {
   const [imageLoaded, setImageLoaded] = useState<boolean>(false);
+  const imageRef = useRef<HTMLImageElement>(null);
 
-  const handleLoad = useCallback(() => {
-    setImageLoaded(true);
+  useEffect(() => {
+    if (imageRef.current?.complete) setImageLoaded(true);
   }, []);
 
   const imageClassNames = classNames(
@@ -62,22 +63,24 @@ export function EmptyState({
     <Image
       alt=""
       role="presentation"
+      ref={imageRef}
       source={largeImage}
       className={imageClassNames}
       sourceSet={[
         {source: image, descriptor: '568w'},
         {source: largeImage, descriptor: '1136w'},
       ]}
       sizes="(max-width: 568px) 60vw"
-      onLoad={handleLoad}
+      onLoad={() => setImageLoaded(true)}
     />
   ) : (
     <Image
       alt=""
       role="presentation"
+      ref={imageRef}
       className={imageClassNames}
       source={image}
-      onLoad={handleLoad}
+      onLoad={() => setImageLoaded(true)}
     />
   );
 

polaris-react/src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, forwardRef} from 'react';
 
 interface SourceSet {
   source: string;
@@ -16,34 +16,33 @@ export interface ImageProps extends React.HTMLProps<HTMLImageElement> {
   onError?(): void;
 }
 
-export function Image({
-  alt,
-  sourceSet,
-  source,
-  crossOrigin,
-  onLoad,
-  className,
-  ...rest
-}: ImageProps) {
-  const finalSourceSet = sourceSet
-    ? sourceSet
-        .map(({source: subSource, descriptor}) => `${subSource} ${descriptor}`)
-        .join(',')
-    : null;
+export const Image = forwardRef<HTMLImageElement, ImageProps>(
+  ({alt, sourceSet, source, crossOrigin, onLoad, className, ...rest}, ref) => {
+    const finalSourceSet = sourceSet
+      ? sourceSet
+          .map(
+            ({source: subSource, descriptor}) => `${subSource} ${descriptor}`,
+          )
+          .join(',')
+      : null;
 
-  const handleLoad = useCallback(() => {
-    if (onLoad) onLoad();
-  }, [onLoad]);
+    const handleLoad = useCallback(() => {
+      if (onLoad) onLoad();
+    }, [onLoad]);
 
-  return (
-    <img
-      alt={alt}
-      src={source}
-      crossOrigin={crossOrigin}
-      className={className}
-      onLoad={handleLoad}
-      {...(finalSourceSet ? {srcSet: finalSourceSet} : {})}
-      {...rest}
-    />
-  );
-}
+    return (
+      <img
+        ref={ref}
+        alt={alt}
+        src={source}
+        crossOrigin={crossOrigin}
+        className={className}
+        onLoad={handleLoad}
+        {...(finalSourceSet ? {srcSet: finalSourceSet} : {})}
+        {...rest}
+      />
+    );
+  },
+);
+
+Image.displayName = 'Image';