mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
defer rendering the preview
This commit is contained in:
parent
06389f96b9
commit
aa6b585b96
1 changed files with 5 additions and 4 deletions
|
@ -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();
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue