feat: wasm loading error state

Author: brettkolodny

src/App.tsx

@@ -3,11 +3,10 @@ import { Editor } from "./Editor";
 import { Logo } from "./components/Logo";
 import { Preview } from "./Preview";
 import { useStore } from "@/store";
-import { useEffect, type FC } from "react";
+import { useEffect } from "react";
 
 // Glue code required to be able to run wasm compiled Go code.
 import "@/utils/wasm_exec.js";
-import { LoaderIcon } from "lucide-react";
 
 type GoPreviewDef = (v: unknown) => Promise<string>;
 
@@ -32,8 +31,8 @@ declare class Go {
 }
 
 export const App = () => {
-	const $isWasmLoaded = useStore((state) => state.isWasmLoaded);
-	const $setIsWasmLoaded = useStore((state) => state.setIsWasmLoaded);
+	const $wasmState = useStore((state) => state.wasmState);
+	const $setWasmState = useStore((state) => state.setWasmState);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
@@ -46,13 +45,14 @@ export const App = () => {
 				);
 
 				goWasm.run(result.instance);
-				$setIsWasmLoaded(true);
+				$setWasmState("loaded");
 			} catch (e) {
+				$setWasmState("error");
 				console.error(e);
 			}
 		};
 
-		if (!$isWasmLoaded) {
+		if ($wasmState !== "loaded") {
 			initWasm();
 		}
 	}, []);
@@ -97,7 +97,7 @@ export const App = () => {
 			</nav>
 
 			<ResizablePanelGroup
-				aria-hidden={!$isWasmLoaded}
+				aria-hidden={!$wasmState}
 				direction={"horizontal"}
 			>
 				{/* EDITOR */}

src/Preview.tsx

@@ -10,17 +10,20 @@ import type { ImperativePanelHandle } from "react-resizable-panels";
 import { useStore } from "@/store";
 
 export const Preview: FC = () => {
-	const $isWasmLoaded = useStore((state) => state.isWasmLoaded);
+	const $wasmState = useStore((state) => state.wasmState);
 
 	return (
 		<ResizablePanel className="relative">
-			{!$isWasmLoaded ? (
+			{$wasmState !== "loaded" ? (
 				<div className="absolute top-0 left-0 z-10 flex h-full w-full items-center justify-center backdrop-blur-sm">
-					<WasmLoading />
+					{$wasmState === "loading" ? <WasmLoading /> : <WasmError />}
 				</div>
 			) : null}
 
-			<div aria-hidden={!$isWasmLoaded} className="flex h-full w-full flex-col items-start gap-6 p-8">
+			<div
+				aria-hidden={$wasmState !== "loaded"}
+				className="flex h-full w-full flex-col items-start gap-6 p-8"
+			>
 				<div className="flex w-full items-center justify-between">
 					<p className="font-semibold text-3xl text-content-primary">
 						Parameters
@@ -122,7 +125,7 @@ const WasmLoading: FC = () => {
 			<LoaderIcon className="animate-spin text-content-primary" />
 			<div className="text-center">
 				<p className="font-semibold text-content-primary text-xl">
-					Loading Assets
+					Loading assets
 				</p>
 				<p className="text-content-secondary text-sm">
 					Add some copy here to explain that this will only take a few moments
@@ -131,3 +134,16 @@ const WasmLoading: FC = () => {
 		</div>
 	);
 };
+
+const WasmError: FC = () => {
+	return (
+		<div className="flex w-full max-w-xs flex-col items-center justify-center gap-2 rounded-xl border border-border-destructive bg-surface-tertiary p-4 text-center">
+			<p className="font-semibold text-content-primary text-xl">
+				Unable to load assets{" "}
+			</p>
+			<p className="text-content-destructive text-sm">
+				Add some copy here to explain that this will only take a few moments
+			</p>
+		</div>
+	);
+};

src/store.tsx

@@ -8,19 +8,21 @@ const defaultCode = `terraform {
   }
 }`;
 
+type WasmState = "loaded" | "loading" | "error";
+
 type State = {
 	code: string;
-	isWasmLoaded: boolean;
+	wasmState: WasmState;
 	error?: string;
 	setCode: (code: string) => void;
 	setError: (error: string) => void;
-	setIsWasmLoaded: (isWasmLoaded: boolean) => void;
+	setWasmState: (wasmState: WasmState) => void;
 };
 
 export const useStore = create<State>()((set) => ({
 	code: defaultCode,
-	isWasmLoaded: false,
+	wasmState: "loading",
 	setCode: (code) => set((_) => ({ code })),
 	setError: (error) => set((_) => ({ error })),
-	setIsWasmLoaded: (isWasmLoaded) => set((_) => ({ isWasmLoaded })),
+	setWasmState: (wasmState) => set((_) => ({ wasmState })),
 }));