feat: implement SPICE error handling and loading state in schematic viewer

examples/example15-spice-error-test.fixture.tsx

@@ -0,0 +1,17 @@
+import { SchematicViewer } from "lib/components/SchematicViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+export default () => (
+  <SchematicViewer
+    circuitJson={renderToCircuitJson(
+      <board width="10mm" height="10mm">
+        {/* This circuit should trigger a SPICE error due to missing output specification */}
+        <resistor name="R1" resistance={1000} schX={-2} />
+        <capacitor name="C1" capacitance="1uF" schX={2} />
+        {/* No trace or source - this should cause validation errors */}
+      </board>,
+    )}
+    containerStyle={{ height: "100%" }}
+    spiceSimulationEnabled={true}
+  />
+)

lib/components/LoadingState.tsx

@@ -0,0 +1,92 @@
+interface LoadingStateProps {
+  message?: string
+  subMessage?: string
+  progress?: number
+}
+
+export const LoadingState: React.FC<LoadingStateProps> = ({
+  message = "Running simulation...",
+  subMessage = "Analyzing circuit and computing results",
+  progress,
+}) => {
+  return (
+    <div
+      style={{
+        height: "300px",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "16px",
+        padding: "20px",
+        boxSizing: "border-box",
+      }}
+    >
+      <div
+        style={{
+          width: "48px",
+          height: "48px",
+          border: "4px solid #f3f3f3",
+          borderTop: "4px solid #2196f3",
+          borderRadius: "50%",
+          animation: "spin 1s linear infinite",
+        }}
+      />
+
+      <div style={{ textAlign: "center" }}>
+        <div
+          style={{
+            fontSize: "16px",
+            color: "#333",
+            fontWeight: 600,
+            marginBottom: "4px",
+          }}
+        >
+          {message}
+        </div>
+        <div style={{ fontSize: "14px", color: "#666" }}>{subMessage}</div>
+      </div>
+
+      {progress !== undefined && (
+        <div style={{ width: "200px" }}>
+          <div
+            style={{
+              height: "4px",
+              backgroundColor: "#f0f0f0",
+              borderRadius: "2px",
+              overflow: "hidden",
+            }}
+          >
+            <div
+              style={{
+                height: "100%",
+                backgroundColor: "#2196f3",
+                borderRadius: "2px",
+                transition: "width 0.3s ease",
+                width: `${Math.max(5, Math.min(100, progress))}%`,
+              }}
+            />
+          </div>
+          <div
+            style={{
+              fontSize: "12px",
+              color: "#999",
+              marginTop: "8px",
+              textAlign: "center",
+            }}
+          >
+            {Math.round(progress)}% complete
+          </div>
+        </div>
+      )}
+
+      <style>{`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  )
+}

lib/components/SchematicViewer.tsx

@@ -85,13 +85,25 @@ export const SchematicViewer = ({
     [circuitJson],
   )
 
-  const spiceString = useMemo(() => {
-    if (!spiceSimulationEnabled) return null
+  const [spiceString, setSpiceString] = useState<string | null>(null)
+  const [spiceGenerationError, setSpiceGenerationError] = useState<
+    string | null
+  >(null)
+
+  useMemo(() => {
+    if (!spiceSimulationEnabled) {
+      setSpiceString(null)
+      setSpiceGenerationError(null)
+      return
+    }
     try {
-      return getSpiceFromCircuitJson(circuitJson, spiceSimOptions)
-    } catch (e) {
+      const generated = getSpiceFromCircuitJson(circuitJson, spiceSimOptions)
+      setSpiceString(generated)
+      setSpiceGenerationError(null)
+    } catch (e: any) {
       console.error("Failed to generate SPICE string", e)
-      return null
+      setSpiceString(null)
+      setSpiceGenerationError(e?.message || "Failed to generate SPICE netlist")
     }
   }, [
     circuitJsonKey,
@@ -101,6 +113,7 @@ export const SchematicViewer = ({
   ])
 
   const [hasSpiceSimRun, setHasSpiceSimRun] = useState(false)
+  const [spiceRetryCounter, setSpiceRetryCounter] = useState(0)
 
   useEffect(() => {
     setHasSpiceSimRun(false)
@@ -111,7 +124,7 @@ export const SchematicViewer = ({
     nodes,
     isLoading: isSpiceSimLoading,
     error: spiceSimError,
-  } = useSpiceSimulation(hasSpiceSimRun ? spiceString : null)
+  } = useSpiceSimulation(hasSpiceSimRun ? spiceString : null, spiceRetryCounter)
 
   const [editModeEnabled, setEditModeEnabled] = useState(defaultEditMode)
   const [snapToGrid, setSnapToGrid] = useState(true)
@@ -339,7 +352,9 @@ export const SchematicViewer = ({
     <MouseTracker>
       {onSchematicComponentClicked && (
         <style>
-          {`.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }`}
+          {
+            ".schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }"
+          }
         </style>
       )}
       <div
@@ -466,12 +481,17 @@ export const SchematicViewer = ({
             nodes={nodes}
             isLoading={isSpiceSimLoading}
             error={spiceSimError}
+            spiceGenerationError={spiceGenerationError}
             simOptions={spiceSimOptions}
             onSimOptionsChange={(options) => {
               setHasSpiceSimRun(true)
               setSpiceSimOptions(options)
             }}
             hasRun={hasSpiceSimRun}
+            onRetry={() => {
+              setHasSpiceSimRun(true)
+              setSpiceRetryCounter((prev) => prev + 1)
+            }}
           />
         )}
         {onSchematicComponentClicked &&