From 49e36b6e009a93fd1e222ad24194878866dd76f8 Mon Sep 17 00:00:00 2001
From: dongchengjie <37543964+dongchengjie@users.noreply.github.com>
Date: Mon, 8 Jul 2024 23:18:06 +0800
Subject: [PATCH] chore: editor resizing debounce

---
 src/components/profile/editor-viewer.tsx | 21 +++++++++++----------
 src/utils/debounce.ts                    | 12 ++++++++++++
 2 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/debounce.ts

diff --git a/src/components/profile/editor-viewer.tsx b/src/components/profile/editor-viewer.tsx
index 1da2f53ec..601091494 100644
--- a/src/components/profile/editor-viewer.tsx
+++ b/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>
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
new file mode 100644
index 000000000..eda9e4848
--- /dev/null
+++ b/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;
+}