chore: add image uploading status

web/src/components/MemoEditor.tsx

@@ -46,6 +46,7 @@ const MemoEditor: React.FC<Props> = () => {
   const editorState = useAppSelector((state) => state.editor);
   const tags = useAppSelector((state) => state.memo.tags);
   const [isTagSeletorShown, toggleTagSeletor] = useToggle(false);
+  const [isUploadingResource, setIsUploadingResource] = useToggle(false);
   const editorRef = useRef<EditorRefActions>(null);
   const prevGlobalStateRef = useRef(editorState);
   const tagSeletorRef = useRef<HTMLDivElement>(null);
@@ -119,22 +120,32 @@ const MemoEditor: React.FC<Props> = () => {
     };
   }, []);
 
-  const handleUploadFile = useCallback(async (file: File) => {
-    const { type } = file;
+  const handleUploadFile = useCallback(
+    async (file: File) => {
+      if (isUploadingResource) {
+        return;
+      }
 
-    if (!type.startsWith("image")) {
-      return;
-    }
+      setIsUploadingResource(true);
+      const { type } = file;
 
-    try {
-      const image = await resourceService.upload(file);
-      const url = `/h/r/${image.id}/${image.filename}`;
+      if (!type.startsWith("image")) {
+        return;
+      }
 
-      return url;
-    } catch (error: any) {
-      toastHelper.error(error);
-    }
-  }, []);
+      try {
+        const image = await resourceService.upload(file);
+        const url = `/h/r/${image.id}/${image.filename}`;
+
+        return url;
+      } catch (error: any) {
+        toastHelper.error(error);
+      } finally {
+        setIsUploadingResource(false);
+      }
+    },
+    [isUploadingResource]
+  );
 
   const handleSaveBtnClick = useCallback(async (content: string) => {
     if (content === "") {
@@ -283,8 +294,13 @@ const MemoEditor: React.FC<Props> = () => {
         {...editorConfig}
         tools={
           <>
-            <img className="action-btn file-upload" src="/icons/tag.svg" onClick={handleTagTextBtnClick} />
-            <img className="action-btn file-upload" src="/icons/image.svg" onClick={handleUploadFileBtnClick} />
+            <div className="action-btn">
+              <img className="icon-img" src="/icons/tag.svg" onClick={handleTagTextBtnClick} />
+            </div>
+            <div className="action-btn">
+              <img className="icon-img" src="/icons/image.svg" onClick={handleUploadFileBtnClick} />
+              <span className={`tip-text ${isUploadingResource ? "!block" : ""}`}>Uploading</span>
+            </div>
           </>
         }
       />

web/src/less/editor.less

@@ -29,7 +29,15 @@
       @apply flex flex-row justify-start items-center;
 
       > .action-btn {
-        @apply p-1 w-7 h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-80 hover:bg-gray-300 hover:shadow;
+        @apply flex flex-row justify-start items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-80 hover:bg-gray-300 hover:shadow;
+
+        > .icon-img {
+          @apply w-5 h-auto;
+        }
+
+        > .tip-text {
+          @apply hidden ml-1 text-xs leading-5 text-gray-700 border border-gray-300 rounded-xl px-2;
+        }
       }
     }
 

web/src/less/setting-dialog.less

@@ -42,6 +42,7 @@
 
       > .section-content-container {
         @apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll;
+        .hide-scroll-bar();
 
         > .section-container {
           .flex(column, flex-start, flex-start);