From 6d1e4970f8652fff3cc5231bb573e32dccedc564 Mon Sep 17 00:00:00 2001
From: dendrofen <ma9k97dev@gmail.com>
Date: Sat, 16 Sep 2023 13:17:48 +0300
Subject: [PATCH] feat: added processing status message

---
 src/components/ProcessButtons.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/ProcessButtons.js b/src/components/ProcessButtons.js
index 8eb34c8..14fe394 100644
--- a/src/components/ProcessButtons.js
+++ b/src/components/ProcessButtons.js
@@ -1,16 +1,24 @@
 import styles from '@/app/page.module.css';
 import { exportStageSVG } from "@/lib";
-import { useCallback, useState } from "react";
+import { startTransition, useCallback, useState } from "react";
 
 export default function ProcessButtons() {
     const [image, setImage] = useState();
+    const [isLoading, setLoading] = useState();
 
     const onStageSVG = useCallback(async () => {
+        startTransition(() => {
+            setLoading(true);
+        })
         const svg = await exportStageSVG(window.Konva.stages[0]);
         setImage(svg);
+        setLoading(false);
     }, [setImage])
 
     const onNoImageSVG = useCallback(async () => {
+        startTransition(() => {
+            setLoading(true);
+        })
         const stage = window.Konva.stages[0];
         const imageNode = stage.getLayers()[0].findOne('Image');
         const svg = await exportStageSVG(stage, false, {
@@ -18,10 +26,12 @@ export default function ProcessButtons() {
             onAfter: () => imageNode.show()
         });
         setImage(svg);
+        setLoading(false);
     }, [setImage])
 
     return (
         <>
+            {isLoading && <p>Processing...</p>}
             <div className={styles.grid}>
                 <button type="button" onClick={onStageSVG}>Stage to SVG</button>
                 <button type="button" onClick={onNoImageSVG}>Without Image to SVG</button>