[EmptyState/Image] Handle image load with ref

Shopify · Apr 10, 2024 · af8dd77 · af8dd77
1 parent 4745e68
commit af8dd77
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 35 deletions.
diff --git a/polaris-react/src/components/EmptyState/EmptyState.tsx b/polaris-react/src/components/EmptyState/EmptyState.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useCallback} from 'react';
+import React, {useState, useCallback, useRef, useEffect} from 'react';
 
 import {classNames} from '../../utilities/css';
 import type {ComplexAction} from '../../types';
@@ -47,11 +47,25 @@ export function EmptyState({
   footerContent,
 }: EmptyStateProps) {
   const [imageLoaded, setImageLoaded] = useState<boolean>(false);
+  const imageRef = useRef<HTMLImageElement>(null);
 
-  const handleLoad = useCallback(() => {
-    setImageLoaded(true);
+  const handleLoad = useCallback((image: HTMLImageElement) => {
+    if (image.complete) {
+      setImageLoaded(true);
+      return;
+    }
+
+    requestAnimationFrame(() => handleLoad(image));
   }, []);
 
+  useEffect(() => {
+    const imageElement = imageRef.current;
+
+    if (imageElement) {
+      handleLoad(imageElement);
+    }
+  }, [handleLoad]);
+
   const imageClassNames = classNames(
     styles.Image,
     imageLoaded && styles.loaded,
@@ -62,22 +76,22 @@ 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}
     />
   ) : (
     <Image
       alt=""
       role="presentation"
+      ref={imageRef}
       className={imageClassNames}
       source={image}
-      onLoad={handleLoad}
     />
   );
 

diff --git a/polaris-react/src/components/Image/Image.tsx b/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';