* modal: show loading indicator on loading iframe modal.

lib/modal/src/component/modal-dialog.tsx

@@ -1,13 +1,26 @@
-import {classes, CustomContent} from '@zui/core';
+import {classes, CustomContent, $} from '@zui/core';
 import {Toolbar} from '@zui/toolbar/src/component/toolbar';
-import {Component, isValidElement} from 'preact';
-import {ModalDialogOptions} from '../types';
+import {Component, createRef, isValidElement} from 'preact';
+import {ModalDialogOptions, ModalDialogState} from '../types';
 
-export class ModalDialog extends Component<ModalDialogOptions> {
+export class ModalDialog extends Component<ModalDialogOptions, ModalDialogState> {
     static defaultProps = {closeBtn: true};
 
+    protected _ref = createRef<HTMLDivElement>();
+
+    constructor(props: ModalDialogOptions) {
+        super(props);
+        this.state = {showed: !props.waitShowEvent};
+    }
+
     componentDidMount() {
-        this.props.afterRender?.call(this, {firstRender: true});
+        const {waitShowEvent, afterRender} = this.props;
+        afterRender?.call(this, {firstRender: true});
+        if (waitShowEvent) {
+            $(this._ref.current).on(waitShowEvent, () => {
+                this.setState({showed: true});
+            });
+        }
     }
 
     componentDidUpdate(): void {
@@ -103,17 +116,20 @@ export class ModalDialog extends Component<ModalDialogOptions> {
             style,
             contentClass,
             children,
+            waitShowEvent,
         } = this.props;
 
+        const loading = waitShowEvent && !this.state.showed;
         return (
-            <div className={classes('modal-dialog', className)} style={style}>
+            <div ref={waitShowEvent ? this._ref : undefined} className={classes('modal-dialog', className, loading ? 'loading' : '')} style={style}>
                 <div className={classes('modal-content', contentClass)}>
                     {this.renderHeader()}
                     {this.renderActions()}
                     {this.renderBody()}
                     {children}
                     {this.renderFooter()}
                 </div>
+                {loading ? <div class="load-indicator loading" /> : null}
             </div>
         );
     }

lib/modal/src/component/modal-iframe-content.tsx

@@ -1,9 +1,11 @@
+import {$} from '@zui/core';
 import {Component, createRef} from 'preact';
 
 export type ModalIframeContentProps = {
     url: string;
     watchHeight?: boolean;
     iframeBodyClass?: string;
+    onLoad?: (this: ModalIframeContent) => void;
 };
 
 export type ModalIframeContentState = {
@@ -45,7 +47,7 @@ export class ModalIframeContent extends Component<ModalIframeContentProps> {
         rob = new ResizeObserver(() => {
             const body = iframeDoc.body;
             const html = iframeDoc.documentElement;
-            const height = Math.ceil(Math.max(body.scrollHeight, body.offsetHeight, html.offsetHeight)) + 1;
+            const height = Math.ceil(Math.max(body.scrollHeight, body.offsetHeight, html.offsetHeight));
             this.setState({height});
         });
         rob.observe(iframeDoc.body);
@@ -68,6 +70,8 @@ export class ModalIframeContent extends Component<ModalIframeContentProps> {
         if (iframeBodyClass) {
             iframeDoc.body.classList.add(iframeBodyClass);
         }
+
+        $(this._ref.current).trigger('modal-iframe-loaded');
     };
 
     render() {

lib/modal/src/style/modal-dialog.css

@@ -10,3 +10,10 @@
 .loading > .modal-dialog > .modal-content {
   @apply -opacity-0 -invisible;
 }
+
+.modal-dialog.loading {
+  @apply -bg-transparent;
+}
+.modal-dialog.loading > .modal-content {
+  @apply -hidden;
+}

lib/modal/src/types/index.ts

@@ -5,4 +5,5 @@ export * from './modal-base-options';
 export * from './modal-events';
 export * from './modal-trigger-options';
 export * from './modal-dialog-options';
+export * from './modal-dialog-state';
 export * from './modal-options';

lib/modal/src/types/modal-dialog-options.ts

@@ -17,6 +17,7 @@ export type ModalDialogOptions = {
     footer?: CustomContentType;
     footerClass?: ClassNameLike;
     footerActions?: ToolbarOptions;
+    waitShowEvent?: string;
     afterRender?: (info: {firstRender: boolean}) => void;
     beforeDestroy?: () => void;
 };

lib/modal/src/types/modal-dialog-state.ts

@@ -0,0 +1,3 @@
+export type ModalDialogState = {
+    showed?: boolean;
+};

lib/modal/src/vanilla/modal.tsx

@@ -58,6 +58,7 @@ async function buildIframeModal(this: Modal, _element: HTMLElement, options: Mod
     return {
         title,
         ...custom,
+        waitShowEvent: 'modal-iframe-loaded',
         body: <ModalIframeContent url={url} watchHeight={!hasHeight} />,
     };
 }