show a spinner unless mermaid loaded

This commit is contained in:
Aakansha Doshi 2023-08-30 14:14:24 +05:30
parent b1bd94c377
commit 10a5d18fa2

View File

@ -14,6 +14,7 @@ import {
import { NonDeletedExcalidrawElement } from "../element/types"; import { NonDeletedExcalidrawElement } from "../element/types";
import { canvasToBlob } from "../data/blob"; import { canvasToBlob } from "../data/blob";
import { ArrowRightIcon } from "./icons"; import { ArrowRightIcon } from "./icons";
import Spinner from "./Spinner";
const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw"; const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw";
const MERMAID_EXAMPLE = const MERMAID_EXAMPLE =
@ -212,6 +213,7 @@ const MermaidToExcalidraw = ({
style={{ display: "flex", flexDirection: "column" }} style={{ display: "flex", flexDirection: "column" }}
> >
<label>Mermaid Syntax</label> <label>Mermaid Syntax</label>
<textarea <textarea
style={{ style={{
padding: "0.85rem", padding: "0.85rem",
@ -230,6 +232,7 @@ const MermaidToExcalidraw = ({
<label>Preview</label> <label>Preview</label>
<div className="mermaid-to-excalidraw-wrapper-preview-canvas"> <div className="mermaid-to-excalidraw-wrapper-preview-canvas">
{error && <ErrorComp error={error} />} {error && <ErrorComp error={error} />}
{loading && <Spinner size="2rem" />}
<div ref={canvasRef} /> <div ref={canvasRef} />
</div> </div>
<Button <Button