From ee20e23f1d1206d5e6f1fed7cfd9ffdc58cbbcbe Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sat, 15 Feb 2025 19:09:09 +0000
Subject: [PATCH] refactor: reduce loading indicator delay from 100 to 1ms

---
 src/components/dialogs/OpenImage.tsx     | 15 +++++++++------
 src/components/dialogs/OpenSchematic.tsx |  2 +-
 src/components/dialogs/SaveLitematic.tsx |  2 +-
 src/components/dialogs/SaveSchem.tsx     |  2 +-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/dialogs/OpenImage.tsx b/src/components/dialogs/OpenImage.tsx
index 1f85633..e385640 100644
--- a/src/components/dialogs/OpenImage.tsx
+++ b/src/components/dialogs/OpenImage.tsx
@@ -55,7 +55,7 @@ function OpenImage({ close }: DialogProps) {
 		falling: false,
 	});
 
-	const [isFinished, setIsFinished] = useState(false);
+	const isFinished = useRef(false);
 
 	useEffect(() => {
 		if (acceptedFiles[0]) {
@@ -103,10 +103,11 @@ function OpenImage({ close }: DialogProps) {
 		if (image) {
 			const oldBlocks = [...blocks];
 
-			setIsFinished(false);
+			isFinished.current = false;
 			setLoading(true);
+
 			// Wait for loading indicator to appear
-			await new Promise((resolve) => setTimeout(resolve, 100));
+			await new Promise((resolve) => setTimeout(resolve, 1));
 
 			// Load image through JS canvas
 			const canvas = document.createElement("canvas");
@@ -144,16 +145,18 @@ function OpenImage({ close }: DialogProps) {
 			}
 
 			setLoading(false);
-			setIsFinished(true);
+			isFinished.current = true;
 		}
 	};
 
 	useEffect(() => {
-		if (!isFinished) return;
+		if (!isFinished.current) return;
 		centerCanvas();
 		close();
 
-		return () => setIsFinished(false);
+		return () => {
+			isFinished.current = false;
+		};
 	}, [isFinished, centerCanvas, close]);
 
 	useEffect(() => {
diff --git a/src/components/dialogs/OpenSchematic.tsx b/src/components/dialogs/OpenSchematic.tsx
index d106175..78a7050 100644
--- a/src/components/dialogs/OpenSchematic.tsx
+++ b/src/components/dialogs/OpenSchematic.tsx
@@ -63,7 +63,7 @@ function OpenSchematic({ close }: DialogProps) {
 		if (file) {
 			setLoading(true);
 			// Wait for loading indicator to appear
-			await new Promise((resolve) => setTimeout(resolve, 100));
+			await new Promise((resolve) => setTimeout(resolve, 1));
 
 			const fileExtension = file.name.split(".").pop();
 			const bytes = await file.arrayBuffer();
diff --git a/src/components/dialogs/SaveLitematic.tsx b/src/components/dialogs/SaveLitematic.tsx
index d1cb1e5..a0f460a 100644
--- a/src/components/dialogs/SaveLitematic.tsx
+++ b/src/components/dialogs/SaveLitematic.tsx
@@ -28,7 +28,7 @@ function SaveLitematic({ close, registerSubmit, dialogKeyHandler }: DialogProps)
 	const onSubmit = async () => {
 		setLoading(true);
 		// Wait for loading indicator to appear
-		await new Promise((resolve) => setTimeout(resolve, 100));
+		await new Promise((resolve) => setTimeout(resolve, 1));
 
 		const width = canvasSize.maxX - canvasSize.minX;
 		const height = canvasSize.maxY - canvasSize.minY;
diff --git a/src/components/dialogs/SaveSchem.tsx b/src/components/dialogs/SaveSchem.tsx
index 5f00e4e..b8ad29a 100644
--- a/src/components/dialogs/SaveSchem.tsx
+++ b/src/components/dialogs/SaveSchem.tsx
@@ -52,7 +52,7 @@ function SaveSchem({ close, registerSubmit, dialogKeyHandler }: DialogProps) {
 	const onSubmit = async () => {
 		setLoading(true);
 		// Wait for loading indicator to appear
-		await new Promise((resolve) => setTimeout(resolve, 100));
+		await new Promise((resolve) => setTimeout(resolve, 1));
 
 		const width = canvasSize.maxX - canvasSize.minX;
 		const height = canvasSize.maxY - canvasSize.minY;