Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

defer rendering the preview

Browse Source
This commit is contained in:
Aakansha Doshi 2023-09-04 09:05:22 +05:30
parent 06389f96b9
commit aa6b585b96
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/MermaidToExcalidraw.tsx
View File

@ -1,4 +1,4 @@
import { useState, useRef, useEffect } from "react"; import { useState, useRef, useEffect, useDeferredValue } from "react";
import { AppState, BinaryFiles } from "../types"; import { AppState, BinaryFiles } from "../types";
import { updateActiveTool } from "../utils"; import { updateActiveTool } from "../utils";
import { useApp, useExcalidrawSetAppState } from "./App"; import { useApp, useExcalidrawSetAppState } from "./App";
@ -70,6 +70,7 @@ const MermaidToExcalidraw = ({
}) => { }) => {
const mermaidToExcalidrawLib = useRef<any>(null); const mermaidToExcalidrawLib = useRef<any>(null);
const [text, setText] = useState(""); const [text, setText] = useState("");
const deferredText = useDeferredValue(text);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
@ -122,7 +123,7 @@ const MermaidToExcalidraw = ({
} }
try { try {
mermaidGraphData = await mermaidToExcalidrawLib.current.parseMermaid( mermaidGraphData = await mermaidToExcalidrawLib.current.parseMermaid(
text, deferredText,
{ {
fontSize: DEFAULT_FONT_SIZE, fontSize: DEFAULT_FONT_SIZE,
}, },
@ -131,7 +132,7 @@ const MermaidToExcalidraw = ({
} catch (e: any) { } catch (e: any) {
console.error(e.message); console.error(e.message);
resetPreview(); resetPreview();
if (text) { if (deferredText) {
setError(e.message); setError(e.message);
} }
} }
@ -166,7 +167,7 @@ const MermaidToExcalidraw = ({
} }
}; };
renderExcalidrawPreview(); renderExcalidrawPreview();
}, [text, appState]); }, [deferredText, appState]);
const setAppState = useExcalidrawSetAppState(); const setAppState = useExcalidrawSetAppState();