feat: add loading indicator

src/components/canvas/Blocks.tsx

@@ -14,12 +14,13 @@ interface Props {
 	imageDimensions: Dimension;
 	coords: Position;
 	scale: number;
+	setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 // Lifts 16,000 tiles limit
 settings.use32bitIndex = true;
 
-function Blocks({ blocks, setBlocks, textures, image, imageDimensions, coords, scale }: Props) {
+function Blocks({ blocks, setBlocks, textures, image, imageDimensions, coords, scale, setLoading }: Props) {
 	const app = useApp();
 	const [missingTexture, setMissingTexture] = useState<PIXI.Texture>();
 
@@ -109,6 +110,7 @@ function Blocks({ blocks, setBlocks, textures, image, imageDimensions, coords, s
 			}
 
 			setBlocks(newBlocks);
+			setLoading(false);
 		}
 	}, [image, imageDimensions]);
 

src/components/canvas/Canvas.tsx

@@ -5,6 +5,7 @@ import { Container, Stage } from "@pixi/react";
 
 import { CanvasContext } from "@/context/Canvas";
 import { ImageContext } from "@/context/Image";
+import { LoadingContext } from "@/context/Loading";
 import { SettingsContext } from "@/context/Settings";
 import { TexturesContext } from "@/context/Textures";
 import { ToolContext } from "@/context/Tool";
@@ -25,6 +26,7 @@ PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
 function Canvas() {
 	const { stageSize, canvasSize, blocks, coords, scale, setStageSize, setBlocks, setCoords, setScale } = useContext(CanvasContext);
 	const { image, imageDimensions } = useContext(ImageContext);
+	const { setLoading } = useContext(LoadingContext);
 	const { settings } = useContext(SettingsContext);
 	const textures = useContext(TexturesContext);
 	const { tool, selectedBlock, cssCursor, setTool, setCssCursor } = useContext(ToolContext);
@@ -252,6 +254,7 @@ function Canvas() {
 					imageDimensions={imageDimensions}
 					coords={coords}
 					scale={scale}
+					setLoading={setLoading}
 				/>
 
 				<Container x={coords.x} y={coords.y} scale={scale}>

src/components/dialogs/OpenImage.tsx

@@ -9,8 +9,10 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 import { ImageContext } from "@/context/Image";
+import { LoadingContext } from "@/context/Loading";
 
 function OpenImage({ close }: DialogProps) {
+	const { setLoading } = useContext(LoadingContext);
 	const { setImage: setContextImage, setImageDimensions: setContextImageDimensions } = useContext(ImageContext);
 
 	const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
@@ -50,9 +52,14 @@ function OpenImage({ close }: DialogProps) {
 
 	const onSubmit = () => {
 		if (image) {
-			setContextImage(image);
-			setContextImageDimensions(imageDimensions);
-			close();
+			setLoading(true);
+
+			// Wait for loading indicator to appear
+			setTimeout(() => {
+				setContextImage(image);
+				setContextImageDimensions(imageDimensions);
+				close();
+			}, 100);
 		}
 	};
 

src/components/dialogs/SaveLitematic.tsx

@@ -2,6 +2,7 @@ import { useContext, useState } from "react";
 import * as nbt from "nbtify";
 
 import { CanvasContext } from "@/context/Canvas";
+import { LoadingContext } from "@/context/Loading";
 
 import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
@@ -12,10 +13,15 @@ const blockData: BlockData = _blockData;
 
 function SaveLitematic({ close }: DialogProps) {
 	const { canvasSize, blocks } = useContext(CanvasContext);
+	const { setLoading } = useContext(LoadingContext);
 
 	const [fileName, setFileName] = useState("blockmatic");
 
 	const onSubmit = async () => {
+		setLoading(true);
+		// Wait for loading indicator to appear
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
 		// todo: check if file name input is empty/valid
 		const width = canvasSize.maxX - canvasSize.minX;
 		const height = canvasSize.maxY - canvasSize.minY;
@@ -130,6 +136,8 @@ function SaveLitematic({ close }: DialogProps) {
 		const blob = new Blob([compressed], { type: "application/x-gzip" });
 		const url = URL.createObjectURL(blob);
 
+		setLoading(false);
+
 		const a = document.createElement("a");
 		a.href = url;
 		a.download = `${fileName}.litematic`;