Browse Source

chore: editor resizing debounce

dongchengjie 11 months ago
parent
commit
49e36b6e00
2 changed files with 23 additions and 10 deletions
  1. 11 10
      src/components/profile/editor-viewer.tsx
  2. 12 0
      src/utils/debounce.ts

+ 11 - 10
src/components/profile/editor-viewer.tsx

@@ -18,6 +18,7 @@ import { Notice } from "@/components/base";
 import { nanoid } from "nanoid";
 import { appWindow } from "@tauri-apps/api/window";
 import getSystem from "@/utils/get-system";
+import debounce from "@/utils/debounce";
 
 import * as monaco from "monaco-editor";
 import MonacoEditor from "react-monaco-editor";
@@ -144,12 +145,19 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
     }
   });
 
+  const editorResize = debounce(() => {
+    editorRef.current?.layout();
+    setTimeout(() => editorRef.current?.layout(), 500);
+  }, 100);
+
   useEffect(() => {
-    const unlistenResized = appWindow.onResized(() => {
+    const onResized = debounce(() => {
+      editorResize();
       appWindow.isMaximized().then((maximized) => {
         setIsMaximized(() => maximized);
       });
-    });
+    }, 100);
+    const unlistenResized = appWindow.onResized(onResized);
 
     return () => {
       unlistenResized.then((fn) => fn());
@@ -221,14 +229,7 @@ export const EditorViewer = <T extends Language>(props: Props<T>) => {
             size="medium"
             color="inherit"
             title={t(isMaximized ? "Minimize" : "Maximize")}
-            onClick={() =>
-              appWindow.toggleMaximize().then(() => {
-                editorRef.current?.layout();
-                setTimeout(() => {
-                  editorRef.current?.layout();
-                }, 500);
-              })
-            }
+            onClick={() => appWindow.toggleMaximize().then(editorResize)}
           >
             {isMaximized ? <CloseFullscreenIcon /> : <OpenInFullIcon />}
           </IconButton>

+ 12 - 0
src/utils/debounce.ts

@@ -0,0 +1,12 @@
+export default function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number
+): T {
+  let timeout: ReturnType<typeof setTimeout> | null = null;
+  return function (this: any, ...args: Parameters<T>) {
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  } as T;
+}