@uzum-tech/ui 2.3.4 → 2.3.5

package/es/components.d.ts

@@ -111613,26 +111613,34 @@ export declare const UImageGroup: import("vue").DefineComponent<import("vue").Ex
     defaultCurrent: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export declare const UImagePreview: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    src: StringConstructor;
-    show: {
-        type: BooleanConstructor;
-        default: undefined;
+    readonly src: StringConstructor;
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
     };
-    defaultShow: BooleanConstructor;
-    'onUpdate:show': import("vue").PropType<import("./_utils").MaybeArray<(show: boolean) => void>>;
-    onUpdateShow: import("vue").PropType<import("./_utils").MaybeArray<(show: boolean) => void>>;
-    onNext: import("vue").PropType<() => void>;
-    onPrev: import("vue").PropType<() => void>;
-    onClose: import("vue").PropType<import("./_utils").MaybeArray<() => void>>;
-    onPreviewPrev: import("vue").PropType<() => void>;
-    onPreviewNext: import("vue").PropType<() => void>;
-    showToolbar: {
+    readonly defaultShow: BooleanConstructor;
+    readonly 'onUpdate:show': import("vue").PropType<import("./_utils").MaybeArray<(show: boolean) => void>>;
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly spinProps: {
+        readonly type: import("vue").PropType<Partial<import("./spin").SpinProps>>;
+        readonly default: undefined;
+    };
+    readonly onUpdateShow: import("vue").PropType<import("./_utils").MaybeArray<(show: boolean) => void>>;
+    readonly onNext: import("vue").PropType<() => void>;
+    readonly onPrev: import("vue").PropType<() => void>;
+    readonly onClose: import("vue").PropType<import("./_utils").MaybeArray<() => void>>;
+    readonly onPreviewPrev: import("vue").PropType<() => void>;
+    readonly onPreviewNext: import("vue").PropType<() => void>;
+    readonly showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
-    showToolbarTooltip: BooleanConstructor;
-    renderToolbar: import("vue").PropType<import("./image").ImageRenderToolbar>;
-    theme: import("vue").PropType<import("./_mixins").Theme<"Image", {
+    readonly showToolbarTooltip: BooleanConstructor;
+    readonly renderToolbar: import("vue").PropType<import("./image").ImageRenderToolbar>;
+    readonly theme: import("vue").PropType<import("./_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -111672,7 +111680,7 @@ export declare const UImagePreview: import("vue").DefineComponent<import("vue").
             }, any>;
         }>;
     }>>;
-    themeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Image", {
+    readonly themeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -111712,7 +111720,7 @@ export declare const UImagePreview: import("vue").DefineComponent<import("vue").
             }, any>;
         }>;
     }>>>;
-    builtinThemeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Image", {
+    readonly builtinThemeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -111790,26 +111798,34 @@ export declare const UImagePreview: import("vue").DefineComponent<import("vue").
     doUpdateShow: (value: boolean) => void;
     close: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    src: StringConstructor;
-    show: {
-        type: BooleanConstructor;
-        default: undefined;
+    readonly src: StringConstructor;
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
     };
-    defaultShow: BooleanConstructor;
-    'onUpdate:show': import("vue").PropType<import("./_utils").MaybeArray<(show: boolean) => void>>;
-    onUpdateShow: import("vue").PropType<import("./_utils").MaybeArray<(show: boolean) => void>>;
-    onNext: import("vue").PropType<() => void>;
-    onPrev: import("vue").PropType<() => void>;
-    onClose: import("vue").PropType<import("./_utils").MaybeArray<() => void>>;
-    onPreviewPrev: import("vue").PropType<() => void>;
-    onPreviewNext: import("vue").PropType<() => void>;
-    showToolbar: {
+    readonly defaultShow: BooleanConstructor;
+    readonly 'onUpdate:show': import("vue").PropType<import("./_utils").MaybeArray<(show: boolean) => void>>;
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly spinProps: {
+        readonly type: import("vue").PropType<Partial<import("./spin").SpinProps>>;
+        readonly default: undefined;
+    };
+    readonly onUpdateShow: import("vue").PropType<import("./_utils").MaybeArray<(show: boolean) => void>>;
+    readonly onNext: import("vue").PropType<() => void>;
+    readonly onPrev: import("vue").PropType<() => void>;
+    readonly onClose: import("vue").PropType<import("./_utils").MaybeArray<() => void>>;
+    readonly onPreviewPrev: import("vue").PropType<() => void>;
+    readonly onPreviewNext: import("vue").PropType<() => void>;
+    readonly showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
-    showToolbarTooltip: BooleanConstructor;
-    renderToolbar: import("vue").PropType<import("./image").ImageRenderToolbar>;
-    theme: import("vue").PropType<import("./_mixins").Theme<"Image", {
+    readonly showToolbarTooltip: BooleanConstructor;
+    readonly renderToolbar: import("vue").PropType<import("./image").ImageRenderToolbar>;
+    readonly theme: import("vue").PropType<import("./_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -111849,7 +111865,7 @@ export declare const UImagePreview: import("vue").DefineComponent<import("vue").
             }, any>;
         }>;
     }>>;
-    themeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Image", {
+    readonly themeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -111889,7 +111905,7 @@ export declare const UImagePreview: import("vue").DefineComponent<import("vue").
             }, any>;
         }>;
     }>>>;
-    builtinThemeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Image", {
+    readonly builtinThemeOverrides: import("vue").PropType<import("./_mixins/use-theme").ExtractThemeOverrides<import("./_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -111930,11 +111946,13 @@ export declare const UImagePreview: import("vue").DefineComponent<import("vue").
         }>;
     }>>>;
 }>> & Readonly<{}>, {
-    show: boolean;
-    defaultShow: boolean;
-    showToolbar: boolean;
-    showToolbarTooltip: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    readonly loading: boolean;
+    readonly show: boolean;
+    readonly spinProps: Partial<import("./spin").SpinProps>;
+    readonly defaultShow: boolean;
+    readonly showToolbar: boolean;
+    readonly showToolbarTooltip: boolean;
+}, import("vue").SlotsType<import("./image").ImagePreviewSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export type * from './infinite-scroll';
 export { infiniteScrollProps } from './infinite-scroll';
 export declare const UInfiniteScroll: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/es/image/index.d.ts

@@ -2,6 +2,6 @@ export { imageProps, default as UImage } from './src/Image';
 export type { ImageProps } from './src/Image';
 export { imageGroupProps, default as UImageGroup } from './src/ImageGroup';
 export type { ImageGroupProps } from './src/ImageGroup';
-export { imagePreviewProps, default as UImagePreview } from './src/ImagePreview';
-export type { ImagePreviewProps } from './src/ImagePreview';
+export { default as UImagePreview } from './src/ImagePreview';
+export { imagePreviewProps, type ImagePreviewProps } from './src/interface';
 export type * from './src/public-types';

package/es/image/index.mjs

@@ -1,3 +1,4 @@
 export { imageProps, default as UImage } from "./src/Image.mjs";
 export { imageGroupProps, default as UImageGroup } from "./src/ImageGroup.mjs";
-export { imagePreviewProps, default as UImagePreview } from "./src/ImagePreview.mjs";
+export { default as UImagePreview } from "./src/ImagePreview.mjs";
+export { imagePreviewProps } from "./src/interface.mjs";

package/es/image/src/ImagePreview.d.ts

@@ -1,168 +1,34 @@
-import type { PropType, VNode } from 'vue';
-import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-export declare const imagePreviewProps: {
-    src: StringConstructor;
-    show: {
-        type: BooleanConstructor;
-        default: undefined;
+import type { SlotsType, VNode } from 'vue';
+import type { ImagePreviewSlots } from './public-types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly src: StringConstructor;
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
     };
-    defaultShow: BooleanConstructor;
-    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
-    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
-    onNext: PropType<() => void>;
-    onPrev: PropType<() => void>;
-    onClose: PropType<MaybeArray<() => void>>;
-    onPreviewPrev: PropType<() => void>;
-    onPreviewNext: PropType<() => void>;
-    showToolbar: {
-        type: BooleanConstructor;
-        default: boolean;
+    readonly defaultShow: BooleanConstructor;
+    readonly 'onUpdate:show': import("vue").PropType<import("../../_utils").MaybeArray<(show: boolean) => void>>;
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
     };
-    showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
-    theme: PropType<import("../../_mixins").Theme<"Image", {
-        toolbarIconColor: string;
-        toolbarColor: string;
-        toolbarBoxShadow: string;
-        toolbarBorderRadius: string;
-        overlayColor: string;
-    }, {
-        Tooltip: import("../../_mixins").Theme<"Tooltip", {
-            padding: string;
-            textPadding: string;
-            titleSize: string;
-            titleWeight: string;
-            titleLineHeight: string;
-            subtitleSize: string;
-            subtitleMargin: string;
-            subtitleWeight: string;
-            subtitleLineHeight: string;
-            iconSize: string;
-            arrowSpace: string;
-            noArrowSpace: string;
-            borderRadius: string;
-            color: string;
-            textColor: string;
-        }, {
-            Popover: import("../../_mixins").Theme<"Popover", {
-                space: string;
-                spaceArrow: string;
-                arrowOffset: string;
-                arrowOffsetVertical: string;
-                arrowHeight: string;
-                padding: string;
-                fontSize: string;
-                borderRadius: string;
-                color: string;
-                dividerColor: string;
-                textColor: string;
-                boxShadow: string;
-            }, any>;
-        }>;
-    }>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
-        toolbarIconColor: string;
-        toolbarColor: string;
-        toolbarBoxShadow: string;
-        toolbarBorderRadius: string;
-        overlayColor: string;
-    }, {
-        Tooltip: import("../../_mixins").Theme<"Tooltip", {
-            padding: string;
-            textPadding: string;
-            titleSize: string;
-            titleWeight: string;
-            titleLineHeight: string;
-            subtitleSize: string;
-            subtitleMargin: string;
-            subtitleWeight: string;
-            subtitleLineHeight: string;
-            iconSize: string;
-            arrowSpace: string;
-            noArrowSpace: string;
-            borderRadius: string;
-            color: string;
-            textColor: string;
-        }, {
-            Popover: import("../../_mixins").Theme<"Popover", {
-                space: string;
-                spaceArrow: string;
-                arrowOffset: string;
-                arrowOffsetVertical: string;
-                arrowHeight: string;
-                padding: string;
-                fontSize: string;
-                borderRadius: string;
-                color: string;
-                dividerColor: string;
-                textColor: string;
-                boxShadow: string;
-            }, any>;
-        }>;
-    }>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
-        toolbarIconColor: string;
-        toolbarColor: string;
-        toolbarBoxShadow: string;
-        toolbarBorderRadius: string;
-        overlayColor: string;
-    }, {
-        Tooltip: import("../../_mixins").Theme<"Tooltip", {
-            padding: string;
-            textPadding: string;
-            titleSize: string;
-            titleWeight: string;
-            titleLineHeight: string;
-            subtitleSize: string;
-            subtitleMargin: string;
-            subtitleWeight: string;
-            subtitleLineHeight: string;
-            iconSize: string;
-            arrowSpace: string;
-            noArrowSpace: string;
-            borderRadius: string;
-            color: string;
-            textColor: string;
-        }, {
-            Popover: import("../../_mixins").Theme<"Popover", {
-                space: string;
-                spaceArrow: string;
-                arrowOffset: string;
-                arrowOffsetVertical: string;
-                arrowHeight: string;
-                padding: string;
-                fontSize: string;
-                borderRadius: string;
-                color: string;
-                dividerColor: string;
-                textColor: string;
-                boxShadow: string;
-            }, any>;
-        }>;
-    }>>>;
-};
-export type ImagePreviewProps = ExtractPublicPropTypes<typeof imagePreviewProps>;
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    src: StringConstructor;
-    show: {
-        type: BooleanConstructor;
-        default: undefined;
+    readonly spinProps: {
+        readonly type: import("vue").PropType<Partial<import("../..").SpinProps>>;
+        readonly default: undefined;
     };
-    defaultShow: BooleanConstructor;
-    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
-    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
-    onNext: PropType<() => void>;
-    onPrev: PropType<() => void>;
-    onClose: PropType<MaybeArray<() => void>>;
-    onPreviewPrev: PropType<() => void>;
-    onPreviewNext: PropType<() => void>;
-    showToolbar: {
+    readonly onUpdateShow: import("vue").PropType<import("../../_utils").MaybeArray<(show: boolean) => void>>;
+    readonly onNext: import("vue").PropType<() => void>;
+    readonly onPrev: import("vue").PropType<() => void>;
+    readonly onClose: import("vue").PropType<import("../../_utils").MaybeArray<() => void>>;
+    readonly onPreviewPrev: import("vue").PropType<() => void>;
+    readonly onPreviewNext: import("vue").PropType<() => void>;
+    readonly showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
-    showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
-    theme: PropType<import("../../_mixins").Theme<"Image", {
+    readonly showToolbarTooltip: BooleanConstructor;
+    readonly renderToolbar: import("vue").PropType<import("./public-types").ImageRenderToolbar>;
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -202,7 +68,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, any>;
         }>;
     }>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -242,7 +108,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, any>;
         }>;
     }>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -320,26 +186,34 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     doUpdateShow: (value: boolean) => void;
     close: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    src: StringConstructor;
-    show: {
-        type: BooleanConstructor;
-        default: undefined;
+    readonly src: StringConstructor;
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly defaultShow: BooleanConstructor;
+    readonly 'onUpdate:show': import("vue").PropType<import("../../_utils").MaybeArray<(show: boolean) => void>>;
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly spinProps: {
+        readonly type: import("vue").PropType<Partial<import("../..").SpinProps>>;
+        readonly default: undefined;
     };
-    defaultShow: BooleanConstructor;
-    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
-    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
-    onNext: PropType<() => void>;
-    onPrev: PropType<() => void>;
-    onClose: PropType<MaybeArray<() => void>>;
-    onPreviewPrev: PropType<() => void>;
-    onPreviewNext: PropType<() => void>;
-    showToolbar: {
+    readonly onUpdateShow: import("vue").PropType<import("../../_utils").MaybeArray<(show: boolean) => void>>;
+    readonly onNext: import("vue").PropType<() => void>;
+    readonly onPrev: import("vue").PropType<() => void>;
+    readonly onClose: import("vue").PropType<import("../../_utils").MaybeArray<() => void>>;
+    readonly onPreviewPrev: import("vue").PropType<() => void>;
+    readonly onPreviewNext: import("vue").PropType<() => void>;
+    readonly showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
-    showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
-    theme: PropType<import("../../_mixins").Theme<"Image", {
+    readonly showToolbarTooltip: BooleanConstructor;
+    readonly renderToolbar: import("vue").PropType<import("./public-types").ImageRenderToolbar>;
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -379,7 +253,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, any>;
         }>;
     }>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -419,7 +293,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }, any>;
         }>;
     }>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -460,9 +334,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>;
     }>>>;
 }>> & Readonly<{}>, {
-    show: boolean;
-    defaultShow: boolean;
-    showToolbar: boolean;
-    showToolbarTooltip: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    readonly loading: boolean;
+    readonly show: boolean;
+    readonly spinProps: Partial<import("../..").SpinProps>;
+    readonly defaultShow: boolean;
+    readonly showToolbar: boolean;
+    readonly showToolbarTooltip: boolean;
+}, SlotsType<ImagePreviewSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/image/src/ImagePreview.mjs

@@ -9,28 +9,16 @@ import { UBaseIcon } from "../../_internal/index.mjs";
 import { RotateClockwiseIcon, RotateCounterclockwiseIcon, ZoomInIcon, ZoomOutIcon } from "../../_internal/icons/index.mjs";
 import { useConfig, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { call, download } from "../../_utils/index.mjs";
+import { USpin } from "../../spin/index.mjs";
 import { UTooltip } from "../../tooltip/index.mjs";
 import { imageLight } from "../styles/index.mjs";
 import { closeIcon } from "./icons.mjs";
-import { imageContextKey, imagePreviewSharedProps } from "./interface.mjs";
+import { BLEEDING, imageContextKey, imagePreviewProps } from "./interface.mjs";
 import style from "./styles/index.cssr.mjs";
-const BLEEDING = 32;
-export const imagePreviewProps = Object.assign(Object.assign({}, imagePreviewSharedProps), {
-  src: String,
-  show: {
-    type: Boolean,
-    default: undefined
-  },
-  defaultShow: Boolean,
-  'onUpdate:show': [Function, Array],
-  onUpdateShow: [Function, Array],
-  onNext: Function,
-  onPrev: Function,
-  onClose: [Function, Array]
-});
 export default defineComponent({
   name: 'ImagePreview',
   props: imagePreviewProps,
+  slots: Object,
   setup(props) {
     const {
       src
@@ -557,7 +545,7 @@ export default defineComponent({
             return withDirectives(h("div", {
               class: `${clsPrefix}-image-preview-wrapper`,
               ref: "previewWrapperRef"
-            }, h("img", Object.assign({}, previewedImgProps, {
+            }, !this.loading ? h("img", Object.assign({}, previewedImgProps, {
               draggable: false,
               onMousedown: this.handlePreviewMousedown,
               onDblclick: this.handlePreviewDblclick,
@@ -566,9 +554,15 @@ export default defineComponent({
               src: this.previewSrc,
               ref: "previewRef",
               onDragstart: this.handleDragStart
-            }))), [[vShow, this.mergedShow]]);
+            })) : null), [[vShow, this.mergedShow]]);
           }
-        })), [[zindexable, {
+        }), this.mergedShow && this.loading && h("div", {
+          class: `${clsPrefix}-image-preview-loading`
+        }, h(USpin, Object.assign({}, this.spinProps), {
+          default: this.$slots['spin-default'],
+          icon: this.$slots['spin-icon'],
+          description: this.$slots['spin-description']
+        }))), [[zindexable, {
           enabled: this.mergedShow
         }]]);
       }