feat: Loadable增加配置项允许增加加载中提示

优化modal打开体验

client/web/src/components/Loadable.tsx

@@ -6,7 +6,9 @@ import loadable, {
 } from '@loadable/component';
 import pMinDelay from 'p-min-delay';
 import { LoadingSpinner } from './LoadingSpinner';
-import { isValidStr } from 'tailchat-shared';
+import { isValidStr, t } from 'tailchat-shared';
+import { message } from 'antd';
+import _uniqueId from 'lodash/uniqueId';
 
 function promiseUsage<T>(p: Promise<T>, name: string): Promise<T> {
   const start = new Date().valueOf();
@@ -20,12 +22,33 @@ function promiseUsage<T>(p: Promise<T>, name: string): Promise<T> {
   });
 }
 
+function promiseLoading<T>(p: Promise<T>): Promise<T> {
+  const key = _uniqueId('Loadable');
+  message.loading({
+    content: t('加载中...'),
+    key,
+    duration: 0,
+  });
+
+  return p.then((r) => {
+    message.destroy(key);
+
+    return r;
+  });
+}
+
 interface LoadableOptions<P> extends OptionsWithoutResolver<P> {
   /**
    * 组件名, 如果传入则会记录组件加载用时
    * 用于权衡组件大小
    */
   componentName?: string;
+
+  /**
+   * 加载过程中显示 loading
+   * 一般用于 modal
+   */
+  showLoading?: boolean;
 }
 
 /**
@@ -45,6 +68,10 @@ export function Loadable<Props>(
         p = promiseUsage(p, String(options?.componentName));
       }
 
+      if (options?.showLoading === true) {
+        p = promiseLoading(p);
+      }
+
       return pMinDelay(p, 200, { delayRejection: false });
     },
     {

server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/index.tsx

@@ -1,8 +1,14 @@
 import { showToasts } from '@capital/common';
-import { PortalAdd, PortalRemove } from '@capital/component';
+import { PortalAdd, PortalRemove, Loadable } from '@capital/component';
 import React from 'react';
 import { Translate } from '../translate';
-import { FloatMeetingWindow } from './window';
+
+const FloatMeetingWindow = Loadable(
+  () => import('./window').then((module) => module.FloatMeetingWindow),
+  {
+    showLoading: true,
+  }
+);
 
 let currentMeeting: string | null = null;
 

server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/index.tsx

@@ -1,14 +1,10 @@
 import { regPluginPanelAction } from '@capital/common';
 import { openConfirmModal } from '@capital/component';
+import { startFastMeeting } from './FloatWindow';
 import { Translate } from './translate';
 
 console.log('Plugin 声网音视频 is loaded');
 
-async function startFastMeeting(meetingId: string) {
-  const module = await import('./FloatWindow');
-  module.startFastMeeting(meetingId); // 仅用于测试
-}
-
 // 发起群组会议
 regPluginPanelAction({
   name: 'plugin:com.msgbyte.meeting/groupAction',