Merge pull request #1008 from lumapps/chore/thumbnail-improvement

chore(thumbnail): deal with empty image source

Author: armasson

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+-   Thumbnail: synchronously set error for image with empty source.
+
 ## [3.5.0][] - 2023-07-27
 
 ### Added
@@ -1785,7 +1789,5 @@ _Failed released_
 [3.3.0]: https://github.com/lumapps/design-system/tree/v3.3.0
 [unreleased]: https://github.com/lumapps/design-system/compare/v3.4.0...HEAD
 [3.4.0]: https://github.com/lumapps/design-system/tree/v3.4.0
-
-
-[Unreleased]: https://github.com/lumapps/design-system/compare/v3.5.0...HEAD
-[3.5.0]: https://github.com/lumapps/design-system/tree/v3.5.0
+[unreleased]: https://github.com/lumapps/design-system/compare/v3.5.0...HEAD
+[3.5.0]: https://github.com/lumapps/design-system/tree/v3.5.0

packages/lumx-react/src/components/thumbnail/Thumbnail.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { mdiAbTesting } from '@lumx/icons';
+import { mdiAbTesting, mdiImageBroken } from '@lumx/icons';
 import { Alignment, AspectRatio, Badge, FlexBox, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 import { IMAGE_SIZES, imageArgType, IMAGES } from '@lumx/react/stories/controls/image';
@@ -44,6 +44,10 @@ export const IsLoading = {
     args: { ...Simple.args, isLoading: true },
 };
 
+export const WithoutSource = {
+    args: { image: IMAGES.emptyImage, size: Size.xxl, aspectRatio: AspectRatio.square },
+};
+
 /** Thumbnail error fallback and size variants */
 export const ErrorFallback = {
     args: { image: 'foo' },

packages/lumx-react/src/components/thumbnail/useImageLoad.ts

@@ -3,8 +3,9 @@ import { useEffect, useState } from 'react';
 export type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';
 
 function getState(img: HTMLImageElement | null | undefined, event?: Event) {
-    // Error event occurred.
-    if (event?.type === 'error') {
+    // Error event occurred or image has no source.
+    if (event?.type === 'error' || (img?.complete && !img.getAttribute('src'))) {
+        console.log('HAS ERROR');
         return 'hasError';
     }
     // Image is undefined or incomplete.

packages/lumx-react/src/stories/controls/image.ts

@@ -15,13 +15,22 @@ const portrait3 = '/demo-assets/portrait3.jpg';
 const square1 = '/demo-assets/square1.jpg';
 const square2 = '/demo-assets/square2.jpg';
 const defaultSvg = '/demo-assets/defaultSvg.svg';
+const emptyImage = '';
 
 export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
 export const SQUARE_IMAGES = { square1, square2 };
 export const SVG_IMAGES = { defaultSvg };
+export const EMPTY_IMAGES = { emptyImage };
 export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
 export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
-export const IMAGES = { ...LANDSCAPE_IMAGES, ...PORTRAIT_IMAGES, ...SQUARE_IMAGES, ...AVATAR_IMAGES, ...SVG_IMAGES };
+export const IMAGES = {
+    ...LANDSCAPE_IMAGES,
+    ...PORTRAIT_IMAGES,
+    ...SQUARE_IMAGES,
+    ...AVATAR_IMAGES,
+    ...SVG_IMAGES,
+    ...EMPTY_IMAGES,
+};
 
 export const avatarImageArgType = getSelectArgType(AVATAR_IMAGES);
 export const squareImageArgType = getSelectArgType(SQUARE_IMAGES);
@@ -56,10 +65,14 @@ export const PORTRAIT_IMAGE_SIZES: Record<keyof typeof PORTRAIT_IMAGES, Size> =
 export const SVG_IMAGE_SIZES: Record<keyof typeof SVG_IMAGES, Size> = {
     defaultSvg: { width: 0, height: 0 },
 };
+export const EMPTY_IMAGES_SIZES: Record<keyof typeof EMPTY_IMAGES, Size> = {
+    emptyImage: { width: 0, height: 0 },
+};
 export const IMAGE_SIZES: Record<keyof typeof IMAGES, Size> = {
     ...LANDSCAPE_IMAGE_SIZES,
     ...PORTRAIT_IMAGE_SIZES,
     ...SQUARE_IMAGE_SIZES,
     ...AVATAR_IMAGE_SIZES,
     ...SVG_IMAGE_SIZES,
+    ...EMPTY_IMAGES_SIZES,
 };