Mermaid-Chart · Almoizs-1310 · Dec 5, 2025 · Dec 5, 2025 · Dec 9, 2025 · Dec 9, 2025
diff --git a/.clasp.json b/.clasp.json
@@ -1,7 +1,7 @@
 {
+  "scriptId": "1IzIEW1uGP4WWdowrlYyNEwhasdXObby_Lik-xwRXn3uWFUitm19SHAhU",
   "rootDir": "dist",
-  "scriptId": "1EBKJNiPs_XxntcBHxMKJgfBr7089AHhT3boz7_Lkc6AD0hjsQavkIjxz",
   "parentId": [
-    "1UAVn7sP1pTutyOM2i95jxQz6sjVr2ZrxhG82uLIdd70"
+    "1NVNWs4Wdj2ib6hhPgq1kzA-BMtydvk_SnxoK1K2yX5o"
   ]
-}
+}
diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "google-plugin",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "lint": "eslint .",
-    "login": "clasp login",
-    "setup": "rimraf .clasp.json && mkdirp dist && clasp create --type sheets --title \"My React Project\" --rootDir ./dist && mv ./dist/.clasp.json ./.clasp.json && rimraf dist",
-    "open": "clasp open --addon",
-    "push": "clasp push",
+    "login": "npx clasp login",
+    "setup": "rimraf .clasp.json && mkdirp dist && npx clasp create --type sheets --title \"My React Project\" --rootDir ./dist && mv ./dist/.clasp.json ./.clasp.json && rimraf dist",
+    "open": "npx clasp open --addon",
+    "push": "npx clasp push",
     "setup:https": "mkdirp certs && mkcert -key-file ./certs/key.pem -cert-file ./certs/cert.pem localhost 127.0.0.1",
     "build:dev": "tsc && vite build --mode development",
     "build:test": "tsc && NODE_ENV=test vite build --mode test",

diff --git a/src/client/components/button.module.css b/src/client/components/button.module.css
@@ -5,13 +5,14 @@
   padding: 0.5rem;
   outline: none;
   border-radius: 0.375rem;
-  border: 1px solid rgb(207, 207, 211);
-  background-color: white;
+  border: none;
+  background-color: #E80962;
   cursor: pointer;
+   color: white;
 }
 
 .button:hover {
-  background-color: rgb(0, 66, 235);
+  background-color: #B20E45;
   color: white;
   transition: all 0.2s;
 }

diff --git a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx
@@ -1,13 +1,20 @@
 import { useEffect, useState } from 'react';
-import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import {
+  buildUrl,
+  handleDialogClose,
+  compressBase64Image,
+} from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
 import useAuth from '../../hooks/useAuth';
-import { CircularProgress, Container, Typography } from '@mui/material';
+import { CircularProgress, Container, Typography, Box } from '@mui/material';
 import { showAlertDialog } from '../../utils/alert';
+import LoadingOverlay from '../../components/loading-overlay';
 
 const CreateDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [isInserting, setIsInserting] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -22,6 +29,13 @@ const CreateDiagramDialog = () => {
     const handleMessage = async (e: MessageEvent) => {
       const action = e.data.action;
       if (action === 'save') {
+        if (isInserting) {
+          console.log('Already inserting diagram, ignoring duplicate click');
+          return;
+        }
+
+        setIsInserting(true);
+
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -31,14 +45,17 @@ const CreateDiagramDialog = () => {
         });
 
         try {
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
           await serverFunctions.insertBase64ImageWithMetadata(
-            data.diagramImage,
+            compressedImage,
             metadata.toString()
           );
           handleDialogClose();
         } catch (error) {
           console.error('Error inserting image with metadata', error);
           showAlertDialog('Error inserting image, please try again');
+          setIsInserting(false);
         }
       }
     };
@@ -48,20 +65,23 @@ const CreateDiagramDialog = () => {
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [isInserting]);
+
+  const handleIframeLoad = () => {
+    setIframeLoading(false);
+  };
 
   if (authStatus === 'idle' || authStatus === 'loading') {
     return (
       <Container
         sx={{
           display: 'flex',
-          flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
           height: '96.5vh',
         }}
       >
-        <CircularProgress />
+        <CircularProgress size={40} />
       </Container>
     );
   }
@@ -77,28 +97,67 @@ const CreateDiagramDialog = () => {
           height: '96.5vh',
         }}
       >
-        <Typography variant="h5" gutterBottom my={2} textAlign="center">
+        <Typography variant="h6" gutterBottom textAlign="center">
           Error
         </Typography>
-        <Typography paragraph textAlign="center">
+        <Typography variant="body2" textAlign="center">
           Something went wrong. Please try again later.
         </Typography>
       </Container>
     );
   }
 
-  return (
-    <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
-      <iframe
-        src={diagramsUrl}
-        title="diagrams"
-        style={{
-          border: 'none',
-          width: '100%',
+  if (!diagramsUrl) {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
           height: '96.5vh',
         }}
-      />
-    </div>
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      {isInserting && <LoadingOverlay />}
+      {iframeLoading && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            zIndex: 1000,
+          }}
+        >
+          <CircularProgress size={40} />
+        </Box>
+      )}
+      <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
+        <iframe
+          src={diagramsUrl}
+          title="diagrams"
+          style={{
+            border: 'none',
+            width: '100%',
+            height: '96.5vh',
+            opacity: isInserting ? 0.5 : 1,
+            pointerEvents: isInserting ? 'none' : 'auto',
+          }}
+          onLoad={handleIframeLoad}
+        />
+      </div>
+    </>
   );
 };
 

diff --git a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
@@ -1,12 +1,20 @@
 import { useEffect, useState } from 'react';
 import { serverFunctions } from '../../utils/serverFunctions';
-import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import {
+  buildUrl,
+  handleDialogClose,
+  compressBase64Image,
+} from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 import { showAlertDialog } from '../../utils/alert';
+import LoadingOverlay from '../../components/loading-overlay';
+import { CircularProgress, Container, Typography, Box } from '@mui/material';
 
 const EditDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(true);
 
   useEffect(() => {
     if (!authState?.authorized) return;
@@ -41,6 +49,12 @@ const EditDiagramDialog = () => {
       const action = e.data.action;
       console.log('action', action);
       if (action === 'save') {
+        if (isUpdating) {
+          return;
+        }
+
+        setIsUpdating(true);
+
         const data = e.data.data;
         const metadata = new URLSearchParams({
           projectID: data.projectID,
@@ -49,14 +63,17 @@ const EditDiagramDialog = () => {
           minor: data.minor,
         });
         try {
+          const compressedImage = await compressBase64Image(data.diagramImage);
+
           await serverFunctions.replaceSelectedImageWithBase64AndSize(
-            data.diagramImage,
+            compressedImage,
             metadata.toString()
           );
           handleDialogClose();
         } catch (error) {
           console.error('Error updating image with metadata', error);
           showAlertDialog('Error updating image, please try again');
+          setIsUpdating(false);
         }
       }
     };
@@ -66,24 +83,99 @@ const EditDiagramDialog = () => {
     return () => {
       window.removeEventListener('message', handleMessage);
     };
-  }, []);
+  }, [isUpdating]);
 
-  if (authStatus !== 'success' || !diagramsUrl) {
-    return null;
+  const handleIframeLoad = () => {
+    setIframeLoading(false);
+  };
+
+  if (authStatus === 'idle' || authStatus === 'loading') {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
   }
 
-  return (
-    <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
-      <iframe
-        src={diagramsUrl}
-        title="diagrams"
-        style={{
-          border: 'none',
-          width: '100%',
+  if (authStatus === 'error') {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
           height: '96.5vh',
         }}
-      />
-    </div>
+      >
+        <Typography variant="h6" gutterBottom textAlign="center">
+          Error
+        </Typography>
+        <Typography variant="body2" textAlign="center">
+          Something went wrong. Please try again later.
+        </Typography>
+      </Container>
+    );
+  }
+
+  if (!diagramsUrl) {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <CircularProgress size={40} />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      {isUpdating && <LoadingOverlay />}
+      {iframeLoading && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            zIndex: 1000,
+          }}
+        >
+          <CircularProgress size={40} />
+        </Box>
+      )}
+      <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
+        <iframe
+          src={diagramsUrl}
+          title="diagrams"
+          style={{
+            border: 'none',
+            width: '100%',
+            height: '96.5vh',
+            opacity: isUpdating ? 0.5 : 1,
+            pointerEvents: isUpdating ? 'none' : 'auto',
+          }}
+          onLoad={handleIframeLoad}
+        />
+      </div>
+    </>
   );
 };