trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: reduce loading indicator delay from 100 to 1ms

Browse source
This commit is contained in:
trafficlunar 2025-02-15 19:09:09 +00:00
parent d9dfc39220
commit ee20e23f1d
4 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/dialogs/OpenImage.tsx
View file

@ -55,7 +55,7 @@ function OpenImage({ close }: DialogProps) {
falling: false, falling: false,
}); });
const [isFinished, setIsFinished] = useState(false); const isFinished = useRef(false);
useEffect(() => { useEffect(() => {
if (acceptedFiles[0]) { if (acceptedFiles[0]) {
@ -103,10 +103,11 @@ function OpenImage({ close }: DialogProps) {
if (image) { if (image) {
const oldBlocks = [...blocks]; const oldBlocks = [...blocks];
setIsFinished(false); isFinished.current = false;
setLoading(true); setLoading(true);
// Wait for loading indicator to appear // 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 // Load image through JS canvas
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
@ -144,16 +145,18 @@ function OpenImage({ close }: DialogProps) {
} }
setLoading(false); setLoading(false);
setIsFinished(true); isFinished.current = true;
} }
}; };
useEffect(() => { useEffect(() => {
if (!isFinished) return; if (!isFinished.current) return;
centerCanvas(); centerCanvas();
close(); close();
return () => setIsFinished(false); return () => {
isFinished.current = false;
};
}, [isFinished, centerCanvas, close]); }, [isFinished, centerCanvas, close]);
useEffect(() => { useEffect(() => {

2
src/components/dialogs/OpenSchematic.tsx
View file

@ -63,7 +63,7 @@ function OpenSchematic({ close }: DialogProps) {
if (file) { if (file) {
setLoading(true); setLoading(true);
// Wait for loading indicator to appear // 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 fileExtension = file.name.split(".").pop();
const bytes = await file.arrayBuffer(); const bytes = await file.arrayBuffer();

2
src/components/dialogs/SaveLitematic.tsx
View file

@ -28,7 +28,7 @@ function SaveLitematic({ close, registerSubmit, dialogKeyHandler }: DialogProps)
const onSubmit = async () => { const onSubmit = async () => {
setLoading(true); setLoading(true);
// Wait for loading indicator to appear // 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 width = canvasSize.maxX - canvasSize.minX;
const height = canvasSize.maxY - canvasSize.minY; const height = canvasSize.maxY - canvasSize.minY;

2
src/components/dialogs/SaveSchem.tsx
View file

@ -52,7 +52,7 @@ function SaveSchem({ close, registerSubmit, dialogKeyHandler }: DialogProps) {
const onSubmit = async () => { const onSubmit = async () => {
setLoading(true); setLoading(true);
// Wait for loading indicator to appear // 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 width = canvasSize.maxX - canvasSize.minX;
const height = canvasSize.maxY - canvasSize.minY; const height = canvasSize.maxY - canvasSize.minY;