feat: add loading indicator

src/context/Loading.tsx

@@ -0,0 +1,26 @@
+import { createContext, ReactNode, useState } from "react";
+import LoadingIndicator from "@/assets/loading.svg?react";
+
+interface Props {
+	children: ReactNode;
+}
+
+export const LoadingContext = createContext({
+	loading: false,
+	setLoading: ((value: boolean) => {}) as React.Dispatch<React.SetStateAction<boolean>>,
+});
+
+export const LoadingProvider = ({ children }: Props) => {
+	const [loading, setLoading] = useState(true);
+
+	return (
+		<LoadingContext.Provider value={{ loading, setLoading }}>
+			{loading && (
+				<div className="absolute w-full h-full z-[9999] backdrop-brightness-50 flex justify-center items-center gap-4">
+					<LoadingIndicator fill="white" className="w-16 h-16" />
+				</div>
+			)}
+			{children}
+		</LoadingContext.Provider>
+	);
+};

src/context/Textures.tsx

@@ -1,6 +1,8 @@
-import { createContext, ReactNode, useEffect, useState } from "react";
+import { createContext, ReactNode, useContext, useEffect, useState } from "react";
 import { BaseTexture, Spritesheet, Texture } from "pixi.js";
 
+import { LoadingContext } from "./Loading";
+
 import spritesheet from "@/data/blocks/programmer-art/spritesheet.json";
 
 interface Props {
@@ -11,19 +13,15 @@ export const TexturesContext = createContext({} as Record<string, Texture>);
 
 export const TexturesProvider = ({ children }: Props) => {
 	const [textures, setTextures] = useState<Record<string, Texture>>({});
-	const [loaded, setLoaded] = useState(false);
+	const { setLoading } = useContext(LoadingContext);
 
 	useEffect(() => {
 		const sheet = new Spritesheet(BaseTexture.from("/blocks/programmer-art/spritesheet.png"), spritesheet);
 		sheet.parse().then((t) => {
 			setTextures(t);
-			setLoaded(true);
+			setLoading(false);
 		});
 	}, []);
 
-	if (!loaded) {
-		return <h1>Loading...</h1>;
-	}
-
 	return <TexturesContext.Provider value={textures}>{children}</TexturesContext.Provider>;
 };