fix(classroom): add loading state to cloud record button (#1628)

netless-io · Aug 5, 2022 · a2d3878 · a2d3878
1 parent 4395f25
commit a2d3878
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -11,34 +11,33 @@
     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;
     border: none;
     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
@@ -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
@@ -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
@@ -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} />