diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
index ed8c0c3f54c..3b27e0096b6 100644
--- a/desktop/renderer-app/src/pages/BigClassPage/index.tsx
+++ b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
@@ -285,13 +285,13 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                 {classRoomStore.isCreator && (
                     <CloudRecordBtn
                         isRecording={classRoomStore.isRecording}
-                        onClick={() => {
-                            void classRoomStore.toggleRecording({
+                        onClick={() =>
+                            classRoomStore.toggleRecording({
                                 onStop() {
                                     void message.success(t("recording-completed-tips"));
                                 },
-                            });
-                        }}
+                            })
+                        }
                     />
                 )}
                 {/* TODO: open cloud-storage sub window */}
diff --git a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
index 05fdc67a60b..00d1a05055e 100644
--- a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
+++ b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
@@ -243,13 +243,13 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                 {classRoomStore.isCreator && (
                     <CloudRecordBtn
                         isRecording={classRoomStore.isRecording}
-                        onClick={() => {
-                            void classRoomStore.toggleRecording({
+                        onClick={() =>
+                            classRoomStore.toggleRecording({
                                 onStop() {
                                     void message.success(t("recording-completed-tips"));
                                 },
-                            });
-                        }}
+                            })
+                        }
                     />
                 )}
                 {/* TODO: open cloud-storage sub window */}
diff --git a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
index 66d6bd6df96..72fcd466415 100644
--- a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
+++ b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -329,13 +329,13 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                 {classRoomStore.isCreator && (
                     <CloudRecordBtn
                         isRecording={classRoomStore.isRecording}
-                        onClick={() => {
-                            void classRoomStore.toggleRecording({
+                        onClick={() =>
+                            classRoomStore.toggleRecording({
                                 onStop() {
                                     void message.success(t("recording-completed-tips"));
                                 },
-                            });
-                        }}
+                            })
+                        }
                     />
                 )}
                 {/* TODO: open cloud-storage sub window */}
diff --git a/packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/cloudrecord.stories.tsx b/packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/cloudrecord.stories.tsx
index b09c8030d43..ed2209e4a6e 100644
--- a/packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/cloudrecord.stories.tsx
+++ b/packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/cloudrecord.stories.tsx
@@ -16,6 +16,7 @@ export const Overview: Story<CloudRecordBtnProps> = () => {
             isRecording={isRecording}
             onClick={() => {
                 updateRecording(!isRecording);
+                return Promise.resolve();
             }}
         />
     );
diff --git a/packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/index.tsx b/packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/index.tsx
index 7a806d497ec..4facf1f66d2 100644
--- a/packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/index.tsx
+++ b/packages/flat-components/src/components/ClassroomPage/CloudRecordBtn/index.tsx
@@ -1,23 +1,35 @@
+import React, { useCallback, useState } from "react";
 import { observer } from "mobx-react-lite";
-import React from "react";
 import { useTranslation } from "react-i18next";
+
 import { TopBarRightBtn } from "../TopBar";
 import { SVGRecord, SVGRecordStop } from "../../FlatIcons";
+import { useSafePromise } from "../../../utils/hooks";
 
 export type CloudRecordBtnProps = {
     isRecording: boolean;
-    onClick: (evt: any) => void;
+    onClick: () => Promise<void>;
 };
 
 export const CloudRecordBtn: React.FC<CloudRecordBtnProps> = observer(
     ({ isRecording, onClick }) => {
+        const sp = useSafePromise();
         const { t } = useTranslation();
 
+        const [loading, setLoading] = useState(false);
+
+        const handleClick = useCallback(async () => {
+            setLoading(true);
+            await sp(onClick());
+            setLoading(false);
+        }, [onClick, sp]);
+
         return (
             <TopBarRightBtn
+                disabled={loading}
                 icon={isRecording ? <SVGRecordStop active /> : <SVGRecord />}
                 title={t("recording")}
-                onClick={onClick}
+                onClick={handleClick}
             />
         );
     },
diff --git a/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/style.less b/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/style.less
index 6b761c422cf..bf6a2435c42 100644
--- a/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/style.less
+++ b/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/style.less
@@ -11,13 +11,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0
-        (
-            (
-                    @topbar-right-btn-gap -
-                        (@topbar-right-btn-width - @topbar-icon-width)
-                ) / 2
-        );
+    margin: 0 ((@topbar-right-btn-gap - (@topbar-right-btn-width - @topbar-icon-width)) / 2);
     padding: 4px;
     cursor: pointer;
     background-color: white;
@@ -25,20 +19,25 @@
     outline: none;
     border-radius: 8px;
 
-    &:hover {
+    &:not(:disabled):hover {
         background-color: var(--blue-1);
     }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
 }
 
 .flat-color-scheme-dark {
     .topbar-right-btn {
         background-color: var(--grey-10);
 
-        &:hover {
+        &:not(:disabled):hover {
             background-color: var(--grey-11);
         }
 
-        &:active {
+        &:not(:disabled):active {
             background-color: var(--grey-9);
         }
     }
diff --git a/web/flat-web/src/pages/BigClassPage/index.tsx b/web/flat-web/src/pages/BigClassPage/index.tsx
index 6b3e3846026..6cc94a6e5dc 100644
--- a/web/flat-web/src/pages/BigClassPage/index.tsx
+++ b/web/flat-web/src/pages/BigClassPage/index.tsx
@@ -237,13 +237,13 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                 {classRoomStore.isCreator && (
                     <CloudRecordBtn
                         isRecording={classRoomStore.isRecording}
-                        onClick={() => {
-                            void classRoomStore.toggleRecording({
+                        onClick={() =>
+                            classRoomStore.toggleRecording({
                                 onStop() {
                                     void message.success(t("recording-completed-tips"));
                                 },
-                            });
-                        }}
+                            })
+                        }
                     />
                 )}
                 {/* TODO: open cloud-storage sub window */}
diff --git a/web/flat-web/src/pages/OneToOnePage/index.tsx b/web/flat-web/src/pages/OneToOnePage/index.tsx
index 44c73188784..869e309410f 100644
--- a/web/flat-web/src/pages/OneToOnePage/index.tsx
+++ b/web/flat-web/src/pages/OneToOnePage/index.tsx
@@ -193,13 +193,13 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
                 {classRoomStore.isCreator && (
                     <CloudRecordBtn
                         isRecording={classRoomStore.isRecording}
-                        onClick={() => {
-                            void classRoomStore.toggleRecording({
+                        onClick={() =>
+                            classRoomStore.toggleRecording({
                                 onStop() {
                                     void message.success(t("recording-completed-tips"));
                                 },
-                            });
-                        }}
+                            })
+                        }
                     />
                 )}
                 {/* TODO: open cloud-storage sub window */}
diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
index 2f01f3fffd4..a90e47774d2 100644
--- a/web/flat-web/src/pages/SmallClassPage/index.tsx
+++ b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -281,13 +281,13 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                 {classRoomStore.isCreator && (
                     <CloudRecordBtn
                         isRecording={classRoomStore.isRecording}
-                        onClick={() => {
-                            void classRoomStore.toggleRecording({
+                        onClick={() =>
+                            classRoomStore.toggleRecording({
                                 onStop() {
                                     void message.success(t("recording-completed-tips"));
                                 },
-                            });
-                        }}
+                            })
+                        }
                     />
                 )}
                 <CloudStorageButton classroom={classRoomStore} />