From 10a5d18fa2330d776947e2d5e368acbc9fd02dd2 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Wed, 30 Aug 2023 14:14:24 +0530
Subject: [PATCH] show a spinner unless mermaid loaded

---
 src/components/MermaidToExcalidraw.tsx | 3 +++
 1 file changed, 3 insertions(+)

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