Merge pull request #17 from AnasSarkiz/main

feat: Add loading state and error handling for circuit file uploads fixed freezing screen

Author: AnasSarkiz

lib/components/blank-workspace.tsx

@@ -5,7 +5,8 @@ import { Upload, FileUp, Zap, ArrowRight, CircuitBoard } from "lucide-react"
 import { useWorkspace } from "./workspace-context"
 
 export function BlankWorkspace() {
-  const { processCircuitFile, processCircuitDrop } = useWorkspace()
+  const { processCircuitFile, processCircuitDrop, setIsProcessingFile } =
+    useWorkspace()
   const [isDragOver, setIsDragOver] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
@@ -14,7 +15,14 @@ export function BlankWorkspace() {
   ) => {
     const file = event.target.files?.[0]
     if (file) {
-      await processCircuitFile(file)
+      try {
+        setIsProcessingFile(true)
+        await processCircuitFile(file)
+      } catch (err) {
+        alert(err instanceof Error ? err.message : "Failed to process file")
+      } finally {
+        setIsProcessingFile(false)
+      }
     }
   }
 

lib/components/preview-canvas.tsx

@@ -8,7 +8,7 @@ import { useState, useRef } from "react"
 import { useSvgGeneration, useSvgTransform } from "../hooks/preview-hooks"
 import { cn } from "@/utils"
 export function PreviewCanvas() {
-  const { circuitJson, lbrnOptions } = useWorkspace()
+  const { circuitJson, lbrnOptions, isProcessingFile } = useWorkspace()
   const [viewMode, setViewMode] = useState<"lbrn" | "pcb" | "both">("lbrn")
   const { lbrnSvg, pcbSvg, isGenerating } = useSvgGeneration({
     circuitJson,
@@ -28,6 +28,29 @@ export function PreviewCanvas() {
   const handleRotate = () => {
     // TODO: implement rotation if needed
   }
+
+  // Show loading screen when processing file but no circuit yet
+  if (!circuitJson && isProcessingFile) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <div className="text-center">
+          <div className="size-12 rounded-full border-2 border-primary/20 border-t-primary animate-spin mx-auto mb-4" />
+          <p className="text-muted-foreground mb-4">Loading circuit...</p>
+          <div className="w-64 mx-auto">
+            <div className="h-2 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full bg-primary rounded-full animate-pulse"
+                style={{
+                  width: "100%",
+                  animation: "shimmer 1.5s ease-in-out infinite",
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
   return (
     <div className="h-full flex flex-col bg-muted/20">
       {/* Canvas Header */}

lib/components/workspace-context.tsx

@@ -17,6 +17,7 @@ interface WorkspaceState {
   lbrnFileContent: LbrnFileContent | null
   lbrnOptions: ConvertCircuitJsonToLbrnOptions
   isConverting: boolean
+  isProcessingFile: boolean
   error: string | null
 }
 
@@ -25,6 +26,7 @@ interface WorkspaceContextType extends WorkspaceState {
   setLbrnFileContent: (data: LbrnFileContent | null) => void
   setLbrnOptions: (options: Partial<ConvertCircuitJsonToLbrnOptions>) => void
   setIsConverting: (converting: boolean) => void
+  setIsProcessingFile: (processing: boolean) => void
   setError: (error: string | null) => void
   convertToLbrn: (options?: any) => Promise<void>
   loadKicadPcbFile: (pcbContent: string) => Promise<void>
@@ -54,6 +56,7 @@ export function WorkspaceProvider({ children }: { children: ReactNode }) {
       origin: { x: 0, y: 0 },
     })
   const [isConverting, setIsConverting] = useState(false)
+  const [isProcessingFile, setIsProcessingFile] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   const setCircuitJson = (data: CircuitJson | null) => {
@@ -106,23 +109,15 @@ export function WorkspaceProvider({ children }: { children: ReactNode }) {
 
     if (fileName.endsWith(".json")) {
       // Handle Circuit JSON files
-      try {
-        const text = await file.text()
-        const circuitJsonData = JSON.parse(text)
-        setCircuitJson(circuitJsonData)
-      } catch (err) {
-        alert("Invalid JSON file")
-      }
+      const text = await file.text()
+      const circuitJsonData = JSON.parse(text)
+      setCircuitJson(circuitJsonData)
     } else if (fileName.endsWith(".kicad_pcb")) {
       // Handle KiCad PCB files
-      try {
-        const text = await file.text()
-        await loadKicadPcbFile(text)
-      } catch (err) {
-        alert(`Failed to convert KiCad file: ${err}`)
-      }
+      const text = await file.text()
+      await loadKicadPcbFile(text)
     } else {
-      alert("Please upload a .json or .kicad_pcb file")
+      throw new Error("Please upload a .json or .kicad_pcb file")
     }
   }
 
@@ -159,30 +154,36 @@ export function WorkspaceProvider({ children }: { children: ReactNode }) {
     const items = dataTransfer.items
     if (items.length === 0) return
 
-    // Check if it's a directory drop
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i]
-      const entry = item.webkitGetAsEntry?.()
-
-      if (entry?.isDirectory) {
-        // Handle folder drop - look for .kicad_pcb file
-        const kicadFile = await findKicadPcbInDirectory(
-          entry as FileSystemDirectoryEntry,
-        )
-        if (kicadFile) {
-          await processCircuitFile(kicadFile)
-          return
-        } else {
-          alert("No .kicad_pcb file found in the dropped folder")
-          return
+    try {
+      setIsProcessingFile(true)
+
+      // Check if it's a directory drop
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i]
+        const entry = item.webkitGetAsEntry?.()
+
+        if (entry?.isDirectory) {
+          // Handle folder drop - look for .kicad_pcb file
+          const kicadFile = await findKicadPcbInDirectory(
+            entry as FileSystemDirectoryEntry,
+          )
+          if (kicadFile) {
+            await processCircuitFile(kicadFile)
+            return
+          } else {
+            alert("No .kicad_pcb file found in the dropped folder")
+            return
+          }
         }
       }
-    }
 
-    // Handle file drops (existing behavior)
-    const files = dataTransfer.files
-    if (files.length > 0) {
-      await processCircuitFile(files[0])
+      // Handle file drops (existing behavior)
+      const files = dataTransfer.files
+      if (files.length > 0) {
+        await processCircuitFile(files[0])
+      }
+    } finally {
+      setIsProcessingFile(false)
     }
   }
 
@@ -218,11 +219,13 @@ export function WorkspaceProvider({ children }: { children: ReactNode }) {
     lbrnFileContent,
     lbrnOptions,
     isConverting,
+    isProcessingFile,
     error,
     setCircuitJson,
     setLbrnFileContent,
     setLbrnOptions,
     setIsConverting,
+    setIsProcessingFile,
     setError,
     convertToLbrn,
     loadKicadPcbFile,

lib/components/workspace-layout.tsx

@@ -26,7 +26,7 @@ export function WorkspaceContent({
   sidebarOpen,
   setSidebarOpen,
 }: { sidebarOpen: boolean; setSidebarOpen: (open: boolean) => void }) {
-  const { circuitJson } = useWorkspace()
+  const { circuitJson, isProcessingFile } = useWorkspace()
   const navigate = useNavigate()
 
   return (
@@ -61,8 +61,8 @@ export function WorkspaceContent({
 
       {/* Main Content Area */}
       <div className="flex-1 flex overflow-hidden">
-        {/* Left Settings Panel - Only show when circuit is loaded */}
-        {circuitJson && (
+        {/* Left Settings Panel - Only show when circuit is loaded and not processing */}
+        {circuitJson && !isProcessingFile && (
           <aside
             className={`${
               sidebarOpen ? "translate-x-0" : "-translate-x-full"
@@ -74,7 +74,11 @@ export function WorkspaceContent({
 
         {/* Canvas Preview Area */}
         <main className="flex-1 overflow-hidden">
-          {circuitJson ? <PreviewCanvas /> : <BlankWorkspace />}
+          {circuitJson || isProcessingFile ? (
+            <PreviewCanvas />
+          ) : (
+            <BlankWorkspace />
+          )}
         </main>
       </div>
     </div>