@lumx/react 3.7.6-alpha.8 → 3.7.6-alpha.9

package/index.d.ts

@@ -1301,6 +1301,8 @@ interface ThumbnailProps extends GenericProps, HasTheme {
     size?: ThumbnailSize;
     /** Image loading mode. */
     loading?: ImgHTMLProps['loading'];
+    /** Ref of an existing placeholder image to display while loading. */
+    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
     /** On click callback. */
     onClick?: MouseEventHandler<HTMLDivElement>;
     /** On key press callback. */
@@ -1383,7 +1385,7 @@ interface ZoomButtonProps {
     /** Zoom out button props */
     zoomOutButtonProps?: IconButtonProps;
 }
-type InheritedThumbnailProps = Pick<ThumbnailProps, 'image' | 'alt' | 'imgProps' | 'imgRef'>;
+type InheritedThumbnailProps = Pick<ThumbnailProps, 'image' | 'alt' | 'imgProps' | 'imgRef' | 'loadingPlaceholderImageRef'>;
 type InheritedImageMetadata = Pick<ImageCaptionMetadata, 'title' | 'description' | 'tags'>;
 type ImageProps = InheritedThumbnailProps & InheritedImageMetadata;
 interface ImagesProps {

package/index.js

@@ -7687,7 +7687,7 @@ const ImageCaption = props => {
     as: as,
     className: className,
     style: captionStyle,
-    orientation: "horizontal",
+    orientation: "vertical",
     vAlign: align,
     hAlign: align === 'center' ? align : undefined,
     gap: "regular"
@@ -8411,16 +8411,13 @@ function useImageLightbox(initialProps) {
       // If we find an image inside the trigger, animate it in transition with the opening image
       const triggerImage = ((_triggerImageRefs = triggerImageRefs[activeImageIndex]) === null || _triggerImageRefs === void 0 ? void 0 : _triggerImageRefs.current) || findImage(triggerElement);
 
-      // Inject the trigger image size as a fallback for better loading state
+      // Inject the trigger image as loading placeholder for better loading state
       const imagesWithFallbackSize = imagesPropsRef.current.map((image, idx) => {
-        var _image$imgProps, _image$imgProps2;
-        if (triggerImage && idx === activeImageIndex && !((_image$imgProps = image.imgProps) !== null && _image$imgProps !== void 0 && _image$imgProps.width) && !((_image$imgProps2 = image.imgProps) !== null && _image$imgProps2 !== void 0 && _image$imgProps2.height)) {
-          const imgProps = _objectSpread2(_objectSpread2({}, image.imgProps), {}, {
-            height: triggerImage.naturalHeight,
-            width: triggerImage.naturalWidth
-          });
+        if (triggerImage && idx === activeImageIndex && !image.loadingPlaceholderImageRef) {
           return _objectSpread2(_objectSpread2({}, image), {}, {
-            imgProps
+            loadingPlaceholderImageRef: {
+              current: triggerImage
+            }
           });
         }
         return image;
@@ -13607,7 +13604,7 @@ const useFocusPointStyle = (_ref2, element, isLoaded) => {
   return style;
 };
 
-const _excluded$1p = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "objectFit", "loading", "size", "theme", "variant", "linkProps", "linkAs"];
+const _excluded$1p = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "objectFit", "loading", "loadingPlaceholderImageRef", "size", "theme", "variant", "linkProps", "linkAs"];
 
 /**
  * Defines the props of the component.
@@ -13640,6 +13637,7 @@ const DEFAULT_PROPS$$ = {
  * @return React element.
  */
 const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
+  var _loadingPlaceholderIm;
   const {
       align,
       alt,
@@ -13658,6 +13656,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading: isLoadingProp,
       objectFit,
       loading,
+      loadingPlaceholderImageRef,
       size,
       theme,
       variant,
@@ -13698,6 +13697,14 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
     wrapperProps.type = forwardedProps.type || 'button';
     wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
   }
+
+  // If we have a loading placeholder image that is really loaded (complete)
+  const loadingPlaceholderImage = isLoading && (loadingPlaceholderImageRef === null || loadingPlaceholderImageRef === void 0 ? void 0 : (_loadingPlaceholderIm = loadingPlaceholderImageRef.current) === null || _loadingPlaceholderIm === void 0 ? void 0 : _loadingPlaceholderIm.complete) && (loadingPlaceholderImageRef === null || loadingPlaceholderImageRef === void 0 ? void 0 : loadingPlaceholderImageRef.current) || undefined;
+  const loadingStyle = loadingPlaceholderImage ? {
+    backgroundImage: `url(${loadingPlaceholderImage.src})`,
+    minWidth: loadingPlaceholderImage.naturalWidth,
+    minHeight: loadingPlaceholderImage.naturalHeight
+  } : undefined;
   return /*#__PURE__*/React.createElement(Wrapper, _extends({}, wrapperProps, {
     ref: ref,
     className: classnames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
@@ -13718,7 +13725,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React.createElement("span", {
     className: `${CLASSNAME$1f}__background`
   }, /*#__PURE__*/React.createElement("img", _extends({}, imgProps, {
-    style: _objectSpread2(_objectSpread2(_objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle),
+    style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle), loadingStyle),
     ref: mergeRefs(setImgElement, propImgRef),
     className: classnames(handleBasicClasses({
       prefix: `${CLASSNAME$1f}__image`,