Add timeout to split-view editor.

Author: flusterIO

apps/fluster/src/features/editor/presentation/split_view/split_view_scaffold.tsx

@@ -1,56 +1,79 @@
-import React, { type ReactNode } from "react";
+import React, { useEffect, useRef, useState, type ReactNode } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import CodeEditor, { CodeEditorProps } from "../code_editor/main";
 import { MdxContent } from "#/mdx/presentation/mdx_content";
 import { MdxNoteBibliographyByContent } from "#/bibliography/presentation/note_bibliography/bib_by_mdx_content";
 import { MdxProviderGroup } from "#/mdx/presentation/mdx_provider_group";
 
 interface SplitViewScaffoldProps
-  extends Omit<CodeEditorProps, "themes" | "isModal" | "vimMode"> {
-  autoSaveId?: string;
+    extends Omit<CodeEditorProps, "themes" | "isModal" | "vimMode"> {
+    autoSaveId?: string;
+    debounceSeconds: AppState["code"]["previewDebounce"];
 }
 
-const SplitViewContainer = ({
-  onChange,
-  value,
-  language,
-  autoSaveId = "splitview-panels",
-  ...props
-}: SplitViewScaffoldProps): ReactNode => {
-  return (
-    <PanelGroup autoSaveId={autoSaveId} direction="horizontal">
-      <Panel id="editor-panel" order={1} defaultSize={50}>
-        <CodeEditor
-          {...props}
-          language={language}
-          value={value}
-          onChange={onChange}
-        />
-      </Panel>
-      <PanelResizeHandle />
-      <Panel
-        id="editor-output-panel"
-        className="bg-background"
-        order={2}
-        defaultSize={50}
-      >
-        <div
-          id="mdx-page-container"
-          className="w-full h-full overflow-y-auto overflow-x-hidden py-16 px-8"
-        >
-          <MdxProviderGroup>
-            <MdxContent
-              removeGrayMatter
-              className="p-6 max-h-full contents"
-              mdx={value}
-            />
-          </MdxProviderGroup>
-          <MdxNoteBibliographyByContent mdx={value} />
-        </div>
-      </Panel>
-    </PanelGroup>
-  );
-};
+import { AppState } from "@/state/initial_state";
+import { connect } from "react-redux";
+
+const connector = connect((state: AppState) => ({
+    debounceSeconds: state.code.previewDebounce,
+}));
+
+const SplitViewContainer = connector(
+    ({
+        onChange,
+        value,
+        language,
+        autoSaveId = "splitview-panels",
+        debounceSeconds,
+        ...props
+    }: SplitViewScaffoldProps): ReactNode => {
+        const timer = useRef<NodeJS.Timeout | null>(null);
+        const [debouncedValue, setDebouncedValue] = useState(value);
+
+        useEffect(() => {
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+            timer.current = setTimeout(() => {
+                setDebouncedValue(value);
+            }, debounceSeconds * 1000);
+        }, [value]);
+
+        return (
+            <PanelGroup autoSaveId={autoSaveId} direction="horizontal">
+                <Panel id="editor-panel" order={1} defaultSize={50}>
+                    <CodeEditor
+                        {...props}
+                        language={language}
+                        value={value}
+                        onChange={onChange}
+                    />
+                </Panel>
+                <PanelResizeHandle />
+                <Panel
+                    id="editor-output-panel"
+                    className="bg-background"
+                    order={2}
+                    defaultSize={50}
+                >
+                    <div
+                        id="mdx-page-container"
+                        className="w-full h-full overflow-y-auto overflow-x-hidden py-16 px-8"
+                    >
+                        <MdxProviderGroup>
+                            <MdxContent
+                                removeGrayMatter
+                                className="p-6 max-h-full contents"
+                                mdx={debouncedValue}
+                            />
+                        </MdxProviderGroup>
+                        <MdxNoteBibliographyByContent mdx={debouncedValue} />
+                    </div>
+                </Panel>
+            </PanelGroup>
+        );
+    }
+);
 
 SplitViewContainer.displayName = "SplitViewScaffold";
 

apps/fluster/src/features/editor/state/code_state.ts

@@ -13,5 +13,7 @@ export interface CodeState {
         dark: BundledTheme;
         light: BundledTheme;
     };
+    /** The debounce timeout in seconds. */
+    previewDebounce: number;
     jupyter: JupyterConfigState;
 }

apps/fluster/src/features/editor/state/initial_state.ts

@@ -1,15 +1,16 @@
 import { CodeState } from "./code_state";
 
 export const initialCodeState: CodeState = {
-  keymap: "standard",
-  defaultLanguage: "python",
-  theme: {
-    dark: "dracula",
-    light: "github-light",
-  },
-  jupyter: {
-    port: 21521,
-    token: "",
-    defaultKernelName: "python",
-  },
+    keymap: "standard",
+    defaultLanguage: "python",
+    theme: {
+        dark: "dracula",
+        light: "github-light",
+    },
+    jupyter: {
+        port: 21521,
+        token: "",
+        defaultKernelName: "python",
+    },
+    previewDebounce: 0.5,
 };

apps/fluster/src/features/editor/state/slice.ts

@@ -3,6 +3,7 @@ import { initialCodeState } from "./initial_state";
 import { BundledLanguage, BundledTheme } from "shiki";
 import { AppState } from "@/state/initial_state";
 import { JupyterConfigState } from "./code_state";
+import { Payload } from "recharts/types/component/DefaultLegendContent";
 
 const slice = createSlice({
     name: "code",
@@ -44,6 +45,12 @@ const slice = createSlice({
                 },
             };
         },
+        setPreviewDebounce(state, action: PayloadAction<number>) {
+            return {
+                ...state,
+                previewDebounce: action.payload,
+            };
+        },
     },
 });
 
@@ -52,6 +59,7 @@ export const {
     setDefaultLanguage,
     setEditorKeymap,
     setJupyterState,
+    setPreviewDebounce,
 } = slice.actions;
 
 export default slice.reducer;