feat: 增加加载动画

src/app/App.tsx

@@ -1,11 +1,14 @@
-import { lazy } from "react";
+import { Loading } from "@/components/Loading";
+import { lazy, Suspense } from "react";
 
 const MainArea = lazy(() => import("@/app/MainArea/index"));
 
 function App() {
   return (
     <div className="h-full bg-[#F4F6FA]">
-      <MainArea />
+      <Suspense fallback={<Loading/>}>
+        <MainArea />
+      </Suspense>
     </div>
   );
 }

src/app/MainArea/index.tsx

@@ -6,20 +6,20 @@ import {
   RealtimeClientProvider,
 } from "@/components/Provider/RealtimeClientProvider";
 import { ReportProvider } from "@/components/Provider/ReportResolveProvider";
-import { RealtimeUtils } from "@coze/realtime-api";
+// import { RealtimeUtils } from "@coze/realtime-api";
 import { useLocation } from "react-router-dom";
 
 function MainContent() {
   const { isConnected, handleDisconnect } = useContext(RealtimeClientContext);
   const location = useLocation();
 
-  const handlePromise = async() => {
+  // const handlePromise = async() => {
-    await RealtimeUtils.checkDevicePermission(false);
+  //   await RealtimeUtils.checkDevicePermission(false);
-  }
+  // }
 
-  useEffect(() => {
+  // useEffect(() => {
-    handlePromise();
+  //   handlePromise();
-  }, []);
+  // }, []);
 
   useEffect(() => {
     if (isConnected) {

src/components/AntechamberFile/index.tsx

@@ -39,8 +39,9 @@ export default function AntechamberFile({handleLoading}:Props) {
     
     handleConnect({
       fileInfo: {type: resp.type,url: resp.url,tableName: resp.tableName,provinceName: resp.provinceName,subjectClaim: resp.subjectClaim},
+    }).then(() => {
+      setHasHandledReport(true);
     });
-    setHasHandledReport(true);
   };
 
 

src/components/Loading/index.css

@@ -0,0 +1,26 @@
+.custom-animation {
+    height: calc(100% - 12px);
+    will-change: width;
+    animation: moveBackAndForth 2s infinite linear;
+}
+
+@keyframes moveBackAndForth {
+    0% {
+        transform: translateX(0);
+    }
+    25% {
+        width: calc(40%);
+        transform: translateX(calc(50% - 12px));
+    }
+    50% {
+        width: calc(20%);
+        transform: translateX(calc(400% - 12px));
+    }
+    75% {
+        width: calc(40%);
+        transform: translateX(calc(50% - 12px));
+    }
+    100% {
+        transform: translateX(0);
+    }
+}

src/components/Loading/index.tsx

@@ -0,0 +1,15 @@
+import "./index.css";
+import LogoSvg from "/icons/logo.png";
+
+export const Loading = () => {
+  return (
+    <div className="h-screen w-full flex items-center justify-center">
+      <div className="flex mx-[12vw] rounded-full border-[3px] border-solid border-[#000] h-[54px] p-[6px] relative flex-1">
+        <div className="w-[calc(20%)] bg-black rounded-full custom-animation absolute left-0"></div>
+        <div className="w-full h-full flex items-center justify-center mix-blend-difference">
+          <img src={LogoSvg} className="w-[115px] h-[18px]" />
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Provider/RealtimeClientProvider.tsx

@@ -105,17 +105,7 @@ export const RealtimeClientProvider = ({
     initMessage?: string;
     fileInfo?: FileInfo;
   }) => {
-    const perm = await RealtimeUtils.checkDevicePermission(false);
-    const device = await RealtimeUtils.getAudioDevices();
 
-    if (!perm.audio) {
-      toast({ title: "连接错误", description: "需要麦克风访问权限" });
-      throw new Error("需要麦克风访问权限");
-    }
-    if (device.audioInputs.length === 0) {
-      toast({ title: "连接错误", description: "没有麦克风设备" });
-      throw new Error("没有麦克风设备");
-    }
 
     const client = new RealtimeClient({
       accessToken: token,
@@ -125,7 +115,7 @@ export const RealtimeClientProvider = ({
       allowPersonalAccessTokenInBrowser: true,
       suppressStationaryNoise: true,
       suppressNonStationaryNoise: true,
-      debug: true,
+      debug: false,
     });
     clientRef.current = client;
 
@@ -149,6 +139,18 @@ export const RealtimeClientProvider = ({
       connectingLockRef.current = false;
       return;
     }
+    const perm = await RealtimeUtils.checkDevicePermission(false);
+    const device = await RealtimeUtils.getAudioDevices();
+    if (!perm.audio) {
+      toast({ title: "连接错误", description: "需要麦克风访问权限" });
+      return;
+      // throw new Error("需要麦克风访问权限");
+    }
+    if (device.audioInputs.length === 0) {
+      toast({ title: "连接错误", description: "没有麦克风设备" });
+      return;
+      // throw new Error("没有麦克风设备");
+    }
 
     try {
       if (!clientRef.current) {