From e96027486042fb8f57b5d8864a25f62fc911689a Mon Sep 17 00:00:00 2001
From: Jimmy Liow <lyj@hainatravel.com>
Date: Sat, 14 Sep 2024 10:28:27 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=BC=80=E5=8F=91=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=8D=E5=8A=A0=E8=BD=BD=20PageSpy=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20main.js=20=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ErrorPage.jsx | 22 +++++++-------
 src/main.jsx                 | 57 +++++++++++++++++++++++++++---------
 src/utils/pagespy.js         |  3 ++
 3 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/src/components/ErrorPage.jsx b/src/components/ErrorPage.jsx
index 5102abd..3cb6266 100644
--- a/src/components/ErrorPage.jsx
+++ b/src/components/ErrorPage.jsx
@@ -1,16 +1,16 @@
-import { useRouteError } from "react-router-dom";
-import { Card, Typography, Flex, Result, Button } from 'antd'
+import { useRouteError } from 'react-router-dom'
+import { Result } from 'antd'
 
 export default function ErrorPage() {
-  const errorResponse = useRouteError();
-  console.info('error: ');
-  console.dir(errorResponse.message);
-  window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
+  const errorResponse = useRouteError()
+  if (import.meta.env.PROD && window.$pageSpy) {
+    window.$pageSpy.triggerPlugins('onOfflineLog', 'upload')
+  }
   return (
     <Result
-    status="404"
-    title="Sorry, an unexpected error has occurred."
-    subTitle={errorResponse?.message || errorResponse.error?.message}
-  />
-  );
+      status="404"
+      title="Sorry, an unexpected error has occurred."
+      subTitle={errorResponse?.message || errorResponse.error?.message}
+    />
+  )
 }
diff --git a/src/main.jsx b/src/main.jsx
index 3680e42..bfc6717 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { ThemeContext } from '@/stores/ThemeContext'
 import AuthApp from '@/views/AuthApp'
@@ -17,11 +17,11 @@ import ChatWindow from '@/views/ChatWindow'
 import MobileConversation from '@/views/mobile/Conversation'
 import MobileChat from '@/views/mobile/Chat'
 import CallCenter from '@/views/CallCenter'
-import MobileSecondHeader from '@/views/mobile/SecondHeaderWrapper';
-import CustomerProfile from '@/views/Conversations/Online/order/CustomerProfile';
+import MobileSecondHeader from '@/views/mobile/SecondHeaderWrapper'
+import CustomerProfile from '@/views/Conversations/Online/order/CustomerProfile'
 
-import Unassign from '@/views/ChatUnassign';
-import ChatAssign from '@/views/Conversations/ChatAssign';
+import Unassign from '@/views/ChatUnassign'
+import ChatAssign from '@/views/Conversations/ChatAssign'
 
 import DingdingLogin from '@/views/dingding/Login'
 import useAuthStore from '@/stores/AuthStore'
@@ -29,7 +29,10 @@ import '@/assets/index.css'
 
 useAuthStore.getState().loadUserSession()
 
-const isMobileApp = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) !== null;
+const isMobileApp =
+  navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
+  ) !== null
 
 const router = createBrowserRouter([
   {
@@ -86,12 +89,38 @@ const router = createBrowserRouter([
       { path: 'dingding/callback', element: <DingdingCallback /> },
     ],
   },
-]);
+])
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  // <React.StrictMode>
-  <ThemeContext.Provider value={{ colorPrimary: '#1ba784', borderRadius: 4 }}>
-      <RouterProvider router={router} fallbackElement={() => <div>Loading...</div>} />
-  </ThemeContext.Provider>
-  // </React.StrictMode>
-);
+const root = document.getElementById('root')
+if (!root) throw new Error('No root element found')
+
+createRoot(root).render(
+  <React.Suspense
+    fallback={
+      <div className="flex h-screen w-screen items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={'animate-spin h-24 w-24 text-slate-600'}
+          >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+          <span className="sr-only">Loading</span>
+      </div>
+    }
+  >
+    <ThemeContext.Provider value={{ colorPrimary: '#1ba784', borderRadius: 4 }}>
+      <RouterProvider
+        router={router}
+        fallbackElement={() => <div>Loading...</div>}
+      />
+    </ThemeContext.Provider>
+  </React.Suspense>,
+)
diff --git a/src/utils/pagespy.js b/src/utils/pagespy.js
index 59ec128..d10e418 100644
--- a/src/utils/pagespy.js
+++ b/src/utils/pagespy.js
@@ -1,6 +1,9 @@
 import { loadScript } from '@/utils/commons';
 
 export const loadPageSpy = (title) => {
+
+  if (import.meta.env.DEV || window.$pageSpy) return
+
   const PageSpySrc = [
     'https://page-spy.mycht.cn/page-spy/index.min.js',
     'https://page-spy.mycht.cn/plugin/data-harbor/index.min.js',