perf: optimize the loading experience of the web panel

avoid the situation of a white screen without content for a long time
msgbyte · Aug 1, 2023 · 7db9d63 · 7db9d63
1 parent c63aeb0
commit 7db9d63
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 22 deletions.
diff --git a/client/shared/i18n/langs/en-US/translation.json b/client/shared/i18n/langs/en-US/translation.json
@@ -99,6 +99,7 @@
   "k4539164b": "The OTP code is 6 digits",
   "k45e2f71f": "Temporary users cannot verify email address, please claim account first",
   "k4603baea": "Create Group Panel",
+  "k465636d6": "Loading webview...",
   "k473d1bbf": "Builtin Email",
   "k47489688": "Group Service",
   "k48a38bc1": "Group not found",

diff --git a/client/shared/i18n/langs/zh-CN/translation.json b/client/shared/i18n/langs/zh-CN/translation.json
@@ -99,6 +99,7 @@
   "k4539164b": "校验码为6位",
   "k45e2f71f": "临时用户无法认证邮箱, 请先认领账号",
   "k4603baea": "创建群组面板",
+  "k465636d6": "加载网页中...",
   "k473d1bbf": "内置邮箱",
   "k47489688": "群组服务",
   "k48a38bc1": "群组不存在",

diff --git a/client/web/plugins/com.msgbyte.offline-icons/src/icons.json b/client/web/plugins/com.msgbyte.offline-icons/src/icons.json
@@ -70,6 +70,18 @@
       "cog": {
         "body": "<path fill=\"currentColor\" d=\"M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97c0-.33-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1c0 .33.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.66Z\"/>"
       },
+      "plus-circle-outline": {
+        "body": "<path fill=\"currentColor\" d=\"M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m1 5h-2v4H7v2h4v4h2v-4h4v-2h-4V7Z\"/>"
+      },
+      "cloud-upload": {
+        "body": "<path fill=\"currentColor\" d=\"M11 20H6.5q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20H13v-7.15l1.6 1.55L16 13l-4-4l-4 4l1.4 1.4l1.6-1.55Z\"/>"
+      },
+      "emoticon-happy-outline": {
+        "body": "<path fill=\"currentColor\" d=\"M20 12a8 8 0 0 0-8-8a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8m2 0a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10M10 9.5c0 .8-.7 1.5-1.5 1.5S7 10.3 7 9.5S7.7 8 8.5 8s1.5.7 1.5 1.5m7 0c0 .8-.7 1.5-1.5 1.5S14 10.3 14 9.5S14.7 8 15.5 8s1.5.7 1.5 1.5m-5 7.73c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81Z\"/>"
+      },
+      "send-circle-outline": {
+        "body": "<path fill=\"currentColor\" d=\"M8 7.71L18 12L8 16.29v-3.34l7.14-.95L8 11.05V7.71M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8Z\"/>"
+      },
       "pound": {
         "body": "<path fill=\"currentColor\" d=\"m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z\"/>"
       },
@@ -91,18 +103,6 @@
       "file-question-outline": {
         "body": "<path fill=\"currentColor\" d=\"M14 2H6a2 2 0 0 0-2 2v16c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8l-6-6m4 18H6V4h7v5h5v11m-3-7c0 1.89-2.25 2.07-2.25 3.76h-1.5c0-2.44 2.25-2.26 2.25-3.76c0-.82-.67-1.5-1.5-1.5s-1.5.68-1.5 1.5H9c0-1.65 1.34-3 3-3s3 1.35 3 3m-2.25 4.5V19h-1.5v-1.5h1.5Z\"/>"
       },
-      "plus-circle-outline": {
-        "body": "<path fill=\"currentColor\" d=\"M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m1 5h-2v4H7v2h4v4h2v-4h4v-2h-4V7Z\"/>"
-      },
-      "cloud-upload": {
-        "body": "<path fill=\"currentColor\" d=\"M11 20H6.5q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20H13v-7.15l1.6 1.55L16 13l-4-4l-4 4l1.4 1.4l1.6-1.55Z\"/>"
-      },
-      "emoticon-happy-outline": {
-        "body": "<path fill=\"currentColor\" d=\"M20 12a8 8 0 0 0-8-8a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8m2 0a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10M10 9.5c0 .8-.7 1.5-1.5 1.5S7 10.3 7 9.5S7.7 8 8.5 8s1.5.7 1.5 1.5m7 0c0 .8-.7 1.5-1.5 1.5S14 10.3 14 9.5S14.7 8 15.5 8s1.5.7 1.5 1.5m-5 7.73c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81Z\"/>"
-      },
-      "send-circle-outline": {
-        "body": "<path fill=\"currentColor\" d=\"M8 7.71L18 12L8 16.29v-3.34l7.14-.95L8 11.05V7.71M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8Z\"/>"
-      },
       "email-edit-outline": {
         "body": "<path fill=\"currentColor\" d=\"M19.07 13.88L13 19.94V22h2.06l6.06-6.07m1.58-2.35l-1.28-1.28a.517.517 0 0 0-.38-.17c-.15.01-.29.06-.39.17l-1 1l2.05 2l1-1c.19-.2.19-.52 0-.72M11 18H4V8l8 5l8-5v2h2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v-2m9-12l-8 5l-8-5h16Z\"/>"
       },
@@ -115,15 +115,15 @@
       "magnify": {
         "body": "<path fill=\"currentColor\" d=\"M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z\"/>"
       },
+      "account-supervisor-outline": {
+        "body": "<path fill=\"currentColor\" d=\"M16.5 15.5c1.72 0 3.75.8 4 1.28v.72h-8v-.72c.25-.48 2.28-1.28 4-1.28m0-1.5c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75M9 13c-2.33 0-7 1.17-7 3.5V19h7v-1.5H3.5v-1c0-.63 2.79-2.16 6.32-2a5.12 5.12 0 0 1 1.55-1.25A12.28 12.28 0 0 0 9 13m0-6.5A1.5 1.5 0 1 1 7.5 8A1.5 1.5 0 0 1 9 6.5M9 5a3 3 0 1 0 3 3a3 3 0 0 0-3-3m7.5 3.5a1 1 0 1 1-1 1a1 1 0 0 1 1-1m0-1.5A2.5 2.5 0 1 0 19 9.5A2.5 2.5 0 0 0 16.5 7Z\"/>"
+      },
       "dock-window": {
         "body": "<path fill=\"currentColor\" d=\"M18 18v2H4a2 2 0 0 1-2-2V8h2v10M22 6v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2m-2 0H8v8h12Z\"/>"
       },
       "account-multiple-plus-outline": {
         "body": "<path fill=\"currentColor\" d=\"M13 11a3 3 0 1 0-3-3a3 3 0 0 0 3 3m0-4a1 1 0 1 1-1 1a1 1 0 0 1 1-1m4.11 3.86a5 5 0 0 0 0-5.72A2.91 2.91 0 0 1 18 5a3 3 0 0 1 0 6a2.91 2.91 0 0 1-.89-.14M13 13c-6 0-6 4-6 4v2h12v-2s0-4-6-4m-4 4c0-.29.32-2 4-2c3.5 0 3.94 1.56 4 2m7 0v2h-3v-2a5.6 5.6 0 0 0-1.8-3.94C24 13.55 24 17 24 17M8 12H5v3H3v-3H0v-2h3V7h2v3h3Z\"/>"
       },
-      "account-supervisor-outline": {
-        "body": "<path fill=\"currentColor\" d=\"M16.5 15.5c1.72 0 3.75.8 4 1.28v.72h-8v-.72c.25-.48 2.28-1.28 4-1.28m0-1.5c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75M9 13c-2.33 0-7 1.17-7 3.5V19h7v-1.5H3.5v-1c0-.63 2.79-2.16 6.32-2a5.12 5.12 0 0 1 1.55-1.25A12.28 12.28 0 0 0 9 13m0-6.5A1.5 1.5 0 1 1 7.5 8A1.5 1.5 0 0 1 9 6.5M9 5a3 3 0 1 0 3 3a3 3 0 0 0-3-3m7.5 3.5a1 1 0 1 1-1 1a1 1 0 0 1 1-1m0-1.5A2.5 2.5 0 1 0 19 9.5A2.5 2.5 0 0 0 16.5 7Z\"/>"
-      },
       "message-badge-outline": {
         "body": "<path fill=\"currentColor\" d=\"M22 7v9c0 1.1-.9 2-2 2H6l-4 4V4c0-1.1.9-2 2-2h10.1c-.1.3-.1.7-.1 1s0 .7.1 1H4v12h16V7.9c.7-.1 1.4-.5 2-.9m-6-4c0 1.7 1.3 3 3 3s3-1.3 3-3s-1.3-3-3-3s-3 1.3-3 3Z\"/>"
       },
@@ -160,12 +160,12 @@
       "puzzle": {
         "body": "<path fill=\"currentColor\" d=\"M20.5 11H19V7a2 2 0 0 0-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1A2.5 2.5 0 0 0 8 3.5V5H4a2 2 0 0 0-2 2v3.8h1.5c1.5 0 2.7 1.2 2.7 2.7c0 1.5-1.2 2.7-2.7 2.7H2V20a2 2 0 0 0 2 2h3.8v-1.5c0-1.5 1.2-2.7 2.7-2.7c1.5 0 2.7 1.2 2.7 2.7V22H17a2 2 0 0 0 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5Z\"/>"
       },
-      "video-box": {
-        "body": "<path fill=\"currentColor\" d=\"m18 16l-4-3.2V16H6V8h8v3.2L18 8m2-4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z\"/>"
-      },
       "compass": {
         "body": "<path fill=\"currentColor\" d=\"M14.19 14.19L6 18l3.81-8.19L18 6m-6-4A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 8.9a1.1 1.1 0 0 0-1.1 1.1a1.1 1.1 0 0 0 1.1 1.1a1.1 1.1 0 0 0 1.1-1.1a1.1 1.1 0 0 0-1.1-1.1Z\"/>"
       },
+      "video-box": {
+        "body": "<path fill=\"currentColor\" d=\"m18 16l-4-3.2V16H6V8h8v3.2L18 8m2-4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Z\"/>"
+      },
       "checkbox-marked-outline": {
         "body": "<path fill=\"currentColor\" d=\"M19 19H5V5h10V3H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-8h-2m-11.09-.92L6.5 11.5L11 16L21 6l-1.41-1.42L11 13.17l-3.09-3.09Z\"/>"
       },

diff --git a/client/web/src/components/Loading.tsx b/client/web/src/components/Loading.tsx
@@ -7,9 +7,10 @@ export interface LoadingProps {
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
+  tip?: string;
 }
 export const Loading: React.FC<LoadingProps> = React.memo((props) => {
-  const { spinning = false, className, style } = props;
+  const { spinning = false, className, style, tip } = props;
 
   return (
     <div className={clsx('relative', className)} style={style}>
@@ -22,7 +23,7 @@ export const Loading: React.FC<LoadingProps> = React.memo((props) => {
           }
         )}
       >
-        <LoadingSpinner />
+        <LoadingSpinner tip={tip} />
       </div>
 
       {props.children}

diff --git a/client/web/src/components/Webview.tsx b/client/web/src/components/Webview.tsx
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { t } from 'tailchat-shared';
 import { withKeepAliveOverlay } from './KeepAliveOverlay';
+import { Loading } from './Loading';
 
 interface WebviewProps {
   className?: string;
@@ -11,7 +13,29 @@ interface WebviewProps {
  * 网页渲染容器
  */
 export const Webview: React.FC<WebviewProps> = (props) => {
-  return <iframe className="w-full h-full" src={props.url} />;
+  const ref = useRef<HTMLIFrameElement>(null);
+  const [spinning, setSpinning] = useState(true);
+
+  useEffect(() => {
+    const callback = () => {
+      setSpinning(false);
+    };
+    ref.current?.addEventListener('load', callback);
+
+    return () => {
+      ref.current?.removeEventListener('load', callback);
+    };
+  }, []);
+
+  return (
+    <Loading
+      spinning={spinning}
+      className="w-full h-full"
+      tip={t('加载网页中...')}
+    >
+      <iframe ref={ref} className="w-full h-full" src={props.url} />
+    </Loading>
+  );
 };
 Webview.displayName = 'Webview';