@lumx/react 3.7.6-alpha.14 → 3.7.6-alpha.15

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.6-alpha.14",
-        "@lumx/icons": "^3.7.6-alpha.14",
+        "@lumx/core": "^3.7.6-alpha.15",
+        "@lumx/icons": "^3.7.6-alpha.15",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.7.6-alpha.14"
+    "version": "3.7.6-alpha.15"
 }

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -24,7 +24,6 @@ import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps'
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 
-
 const aligns = [Alignment.center, Alignment.left, Alignment.right];
 const variants = [ThumbnailVariant.squared, ThumbnailVariant.rounded];
 
@@ -430,14 +429,16 @@ export const LoadingPlaceholderImage = () => {
             <FlexBox orientation="horizontal">
                 <Thumbnail alt="Small image" imgRef={imgRef} image="https://picsum.photos/id/15/128/85" />
                 {isShown && (
-                    <Thumbnail
-                        image={`https://picsum.photos/id/15/2500/1667?cacheBust${uniqueId()}`}
-                        alt="Large image"
-                        // Loading placeholder image
-                        loadingPlaceholderImageRef={imgRef}
-                        // Reserve space
-                        imgProps={{ width: 2500, height: 1667 }}
-                    />
+                    <div style={{ maxHeight: 400 }}>
+                        <Thumbnail
+                            image={`https://picsum.photos/id/15/2500/1667?cacheBust${uniqueId()}`}
+                            alt="Large image"
+                            // Loading placeholder image
+                            loadingPlaceholderImageRef={imgRef}
+                            // Reserve space
+                            imgProps={{ width: 2500, height: 1667 }}
+                        />
+                    </div>
                 )}
             </FlexBox>
         </>

package/src/components/thumbnail/Thumbnail.tsx

@@ -17,7 +17,7 @@ import { Comp, Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { mdiImageBroken } from '@lumx/icons';
-import { mergeRefs, useMergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useImageLoad } from '@lumx/react/components/thumbnail/useImageLoad';
 import { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
@@ -199,21 +199,24 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         >
             <span className={`${CLASSNAME}__background`}>
                 <img
+                    // Use placeholder image size
                     width={loadingPlaceholderImage?.naturalWidth}
                     height={loadingPlaceholderImage?.naturalHeight}
                     {...imgProps}
                     style={{
+                        // Reserve space while loading (when possible)
+                        width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,
                         ...imgProps?.style,
                         ...imageErrorStyle,
                         ...focusPointStyle,
                         ...loadingStyle,
                     }}
-                    ref={mergeRefs(setImgElement, propImgRef)}
+                    ref={useMergeRefs(setImgElement, propImgRef)}
                     className={classNames(
                         handleBasicClasses({
                             prefix: `${CLASSNAME}__image`,
                             isLoading,
-                            hasDefinedSize: !isLoading && Boolean(imgProps?.height && imgProps.width),
+                            hasDefinedSize: Boolean(imgProps?.height && imgProps.width),
                         }),
                         imgProps?.className,
                     )}