From f13478a98441a3a643bff8169fc62a07710aca9d Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 24 Jan 2023 17:06:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Loadable=E5=A2=9E=E5=8A=A0=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B9=E5=85=81=E8=AE=B8=E5=A2=9E=E5=8A=A0=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E4=B8=AD=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

优化modal打开体验
---
 client/web/src/components/Loadable.tsx        | 29 ++++++++++++++++++-
 .../src/FloatWindow/index.tsx                 | 10 +++++--
 .../plugins/com.msgbyte.agora/src/index.tsx   |  6 +---
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/client/web/src/components/Loadable.tsx b/client/web/src/components/Loadable.tsx
index fadc3558..5add6dfa 100644
--- a/client/web/src/components/Loadable.tsx
+++ b/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 });
     },
     {
diff --git a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/index.tsx b/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/index.tsx
index 07cf4f5b..d952a5a9 100644
--- a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/FloatWindow/index.tsx
+++ b/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;
 
diff --git a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/index.tsx b/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/index.tsx
index 90901878..a8464495 100644
--- a/server/plugins/com.msgbyte.agora/web/plugins/com.msgbyte.agora/src/index.tsx
+++ b/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',