diff --git a/src/components/profile/editor-viewer.tsx b/src/components/profile/editor-viewer.tsx index 1da2f53..6010914 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 = (props: Props) => { } }); + 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 = (props: Props) => { 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 ? : } diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts new file mode 100644 index 0000000..eda9e48 --- /dev/null +++ b/src/utils/debounce.ts @@ -0,0 +1,12 @@ +export default function debounce void>( + func: T, + wait: number +): T { + let timeout: ReturnType | null = null; + return function (this: any, ...args: Parameters) { + if (timeout !== null) { + clearTimeout(timeout); + } + timeout = setTimeout(() => func.apply(this, args), wait); + } as T; +}