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 &&

Processing...

}