@axinom/mosaic-ui 0.41.0-rc.9 → 0.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.41.0-rc.9",
+  "version": "0.41.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.14-rc.9",
+    "@axinom/mosaic-core": "^0.4.14",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -104,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "731200c07c26ffdc0c0b0b96589e24db74317987"
+  "gitHead": "e583a1076964626d1d0b1f9fb507d1defc307102"
 }

package/src/components/Loaders/ImageLoader/ImageLoader.spec.tsx

@@ -57,7 +57,7 @@ describe('ImageLoader', () => {
     const imgDisplay = wrapper.find('img').prop('style')?.display;
 
     expect(loader.exists()).toBe(false);
-    expect(imgDisplay).toBe('block');
+    expect(imgDisplay).toBe('unset');
   });
 
   it('emits onLoad callback with img src after successful load', () => {
@@ -98,11 +98,10 @@ describe('ImageLoader', () => {
     wrapper.find('img').prop('onError')!({} as SyntheticEvent);
 
     const loader = wrapper.find(ContentLoader);
-    const imgDisplay = wrapper.find('img').prop('style')?.display;
     const fallbackContainer = wrapper.find('.container').at(1);
 
+    expect(wrapper.find('img').exists()).toBe(false);
     expect(loader.exists()).toBe(false);
-    expect(imgDisplay).toBe('none');
     expect(fallbackContainer.hasClass('fallback')).toBe(true);
   });
 
@@ -119,11 +118,10 @@ describe('ImageLoader', () => {
     const fallbackContainer = wrapper.find('.container').at(1);
 
     expect(loader.exists()).toBe(false);
-    expect(images.at(0).prop('style')?.display).toBe('none'); // hidden failed image
     expect(fallbackContainer.exists()).toBe(false); // no background color
-    expect(images.at(1).exists()).toBe(true); // fallback image
-    expect(images.at(1).prop('src')).toBe(mockFallbackUrl);
-    expect(images.at(1).hasClass('fallBackImage')).toBe(true);
+    expect(images.at(0).exists()).toBe(true); // fallback image
+    expect(images.at(0).prop('src')).toBe(mockFallbackUrl);
+    expect(images.at(0).hasClass('fallBackImage')).toBe(true);
   });
 
   it('emits onError callback with img src after load failure', () => {

package/src/components/Loaders/ImageLoader/ImageLoader.tsx

@@ -7,7 +7,7 @@ import classes from './ImageLoader.scss';
 
 export interface ImageLoaderProps {
   /** Image's url */
-  imgSrc: string;
+  imgSrc?: string;
   /** Image's alt attribute */
   alt?: string;
   /** Image loader height (default: 50) */
@@ -33,9 +33,9 @@ export interface ImageLoaderProps {
   /** Specify the amount of time the component should wait for the image source to arrive before rendering the fallback, in milliseconds (default: 2000). If the image manages to load at a later time, the image will be rendered */
   imageTimeout?: number;
   /** Callback emitted after the image has successfully loaded. Img src is sent back */
-  onLoad?: (src: string) => void;
+  onLoad?: (src?: string) => void;
   /** Callback emitted after the image has failed to load. Img src is sent back */
-  onError?: (src: string) => void;
+  onError?: (src?: string) => void;
   /** Callback emitted when the image element is clicked */
   onImageClick?: (
     event: React.MouseEvent<HTMLImageElement, MouseEvent>,
@@ -45,6 +45,12 @@ export interface ImageLoaderProps {
   imageClassName?: string;
 }
 
+enum ImageLoaderState {
+  Loading = 'loading',
+  Loaded = 'loaded',
+  Failed = 'failed',
+}
+
 /**
  * Renders a loading animation while an image is being fetched
  * @example
@@ -72,25 +78,32 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
 }) => {
   const actualViewBox = viewBox || `0 0 ${width} ${height}`;
 
-  const [srcTimedOut, setSrcTimedOut] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [fallBack, setFallBack] = useState<boolean>(false);
+  const [state, setState] = useState<ImageLoaderState>(
+    ImageLoaderState.Loading,
+  );
+
+  // Fallback if the image source is undefined
+  // We won't even try to load the image in that case
+  useEffect(() => {
+    if (imgSrc === undefined) {
+      setState(ImageLoaderState.Failed);
+    }
+  }, [imgSrc]);
 
-  // check if url has loaded after set time (milliseconds)
-  useEffect(
-    () => {
+  // Fallback if the image source fails to load in time
+  useEffect(() => {
+    if (state === ImageLoaderState.Loading) {
       const timer = setTimeout(() => {
-        if (imgSrc === undefined) {
-          setSrcTimedOut(true);
+        if (state === ImageLoaderState.Loading) {
+          setState(ImageLoaderState.Failed);
+          onError(imgSrc);
         }
       }, imageTimeout);
       return () => {
         clearTimeout(timer);
       };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
+    }
+  }, [imageTimeout, imgSrc, onError, state]);
 
   const customStyles = {
     height: `${height}px`,
@@ -98,20 +111,18 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
   } as React.CSSProperties;
 
   const onLoadHandler = useCallback(() => {
-    setIsLoading(false);
+    setState(ImageLoaderState.Loaded);
     onLoad(imgSrc);
-    setFallBack(false);
   }, [imgSrc, onLoad]);
 
   const onErrorHandler = useCallback(() => {
-    setIsLoading(false);
-    setFallBack(true);
+    setState(ImageLoaderState.Failed);
     onError(imgSrc);
   }, [imgSrc, onError]);
 
   return (
     <div className={classes.container}>
-      {isLoading && (
+      {state === ImageLoaderState.Loading && (
         <div className={classes.loader} style={customStyles}>
           <ContentLoader
             speed={speed}
@@ -123,14 +134,14 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
           </ContentLoader>
         </div>
       )}
-      {(imgSrc !== undefined || srcTimedOut) && (
-        <div className={classes.imageContainer}>
+      <div className={classes.imageContainer}>
+        {state !== ImageLoaderState.Failed && imgSrc !== undefined && (
           <img
-            src={String(imgSrc)}
+            src={imgSrc}
             height={imgHeight}
             width={imgWidth}
             style={{
-              display: isLoading ? 'none' : fallBack ? 'none' : 'block',
+              display: state === ImageLoaderState.Loading ? 'none' : 'unset',
               objectFit: 'contain',
               maxWidth: '100%',
             }}
@@ -141,23 +152,23 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
             data-test-id="image-loader-img"
             className={imageClassName}
           />
-          {fallBack &&
-            (!fallbackSrc ? (
-              <div
-                className={clsx(classes.container, classes.fallback)}
-                style={customStyles}
-              ></div>
-            ) : (
-              <img
-                className={classes.fallBackImage}
-                src={String(fallbackSrc)}
-                height={imgHeight}
-                width={imgWidth}
-              />
-            ))}
-          {!isLoading && !fallBack && children}
-        </div>
-      )}
+        )}
+        {state === ImageLoaderState.Failed &&
+          (fallbackSrc ? (
+            <img
+              className={classes.fallBackImage}
+              src={String(fallbackSrc)}
+              height={imgHeight}
+              width={imgWidth}
+            />
+          ) : (
+            <div
+              className={clsx(classes.container, classes.fallback)}
+              style={customStyles}
+            ></div>
+          ))}
+        {state === ImageLoaderState.Loaded && children}
+      </div>
     </div>
   );
 };