Better loading feedback (#47)

Author: snide

src/lib/utils/geometryWorker.ts

@@ -85,6 +85,20 @@ interface Export3mfResult {
   error?: string;
 }
 
+interface GenerationProgressMessage {
+  type: 'generation-progress';
+  id: number;
+  current: number;
+  total: number;
+  currentItem: string;
+}
+
+export interface GenerationProgress {
+  current: number;
+  total: number;
+  currentItem: string;
+}
+
 // Result interfaces with BufferGeometry
 export interface TrayGeometryData {
   trayId: string;
@@ -126,7 +140,12 @@ export interface GenerationResult {
   allLooseTrayGeometries: LooseTrayGeometryData[];
 }
 
-type WorkerResult = GenerateResult | ExportStlResult | ExportAllStlsResult | Export3mfResult;
+type WorkerResult =
+  | GenerateResult
+  | ExportStlResult
+  | ExportAllStlsResult
+  | Export3mfResult
+  | GenerationProgressMessage;
 
 /**
  * Convert raw geometry data to Three.js BufferGeometry
@@ -152,6 +171,7 @@ export class GeometryWorkerManager {
       resolve: (value: unknown) => void;
       reject: (reason: unknown) => void;
       isGenerateRequest?: boolean;
+      onProgress?: (progress: GenerationProgress) => void;
     }
   >();
 
@@ -168,6 +188,20 @@ export class GeometryWorkerManager {
 
     this.worker.onmessage = (event: MessageEvent<WorkerResult>) => {
       const result = event.data;
+
+      // Handle progress messages without removing the pending request
+      if (result.type === 'generation-progress') {
+        const pending = this.pendingRequests.get(result.id);
+        if (pending?.onProgress) {
+          pending.onProgress({
+            current: result.current,
+            total: result.total,
+            currentItem: result.currentItem
+          });
+        }
+        return;
+      }
+
       const pending = this.pendingRequests.get(result.id);
 
       if (pending) {
@@ -201,7 +235,12 @@ export class GeometryWorkerManager {
   /**
    * Generate all geometries for a project
    */
-  async generate(project: Project, selectedBoxId: string, selectedTrayId: string): Promise<GenerationResult> {
+  async generate(
+    project: Project,
+    selectedBoxId: string,
+    selectedTrayId: string,
+    onProgress?: (progress: GenerationProgress) => void
+  ): Promise<GenerationResult> {
     if (!this.worker) {
       await this.init();
     }
@@ -212,6 +251,7 @@ export class GeometryWorkerManager {
     return new Promise((resolve, reject) => {
       this.pendingRequests.set(id, {
         isGenerateRequest: true,
+        onProgress,
         resolve: (result) => {
           const r = result as GenerateResult;
 

src/lib/workers/geometry.worker.ts

@@ -254,6 +254,14 @@ interface Export3mfResult {
   error?: string;
 }
 
+interface GenerationProgressMessage {
+  type: 'generation-progress';
+  id: number;
+  current: number;
+  total: number;
+  currentItem: string;
+}
+
 // Cache the last generated JSCAD geometries for STL export
 let cachedSelectedTray: Geom3 | null = null;
 let cachedBox: Geom3 | null = null;
@@ -697,9 +705,25 @@ function handleGenerate(msg: GenerateMessage): void {
     // Get all boxes from all layers
     const allBoxes = getAllBoxes(project.layers);
 
+    // Count all loose trays for progress tracking
+    const allLooseTrays = project.layers.flatMap((layer) => layer.looseTrays);
+    const totalOperations = allBoxes.length + allLooseTrays.length;
+    let currentOperation = 0;
+
     // Generate geometries for ALL boxes (for all-no-lid view) and cache JSCAD for STL export
     cachedAllBoxes = [];
-    const allBoxGeometries: BoxGeometryResult[] = allBoxes.map((projectBox) => {
+    const allBoxGeometries: BoxGeometryResult[] = [];
+
+    for (const projectBox of allBoxes) {
+      // Send progress update
+      currentOperation++;
+      self.postMessage({
+        type: 'generation-progress',
+        id,
+        current: currentOperation,
+        total: totalOperations,
+        currentItem: projectBox.name
+      } as GenerationProgressMessage);
       const boxValidation = validateCustomDimensions(projectBox, cardSizes, counterShapes);
       if (!boxValidation.valid) {
         console.warn(`Box "${projectBox.name}" validation failed:`, boxValidation.errors);
@@ -778,16 +802,16 @@ function handleGenerate(msg: GenerateMessage): void {
         trays: cachedTraysForBox
       });
 
-      // Return box dimensions using the layer height (so all boxes in layer report same height)
-      return {
+      // Add box dimensions using the layer height (so all boxes in layer report same height)
+      allBoxGeometries.push({
         boxId: projectBox.id,
         boxName: projectBox.name,
         boxGeometry: boxBufferGeom,
         lidGeometry: lidBufferGeom,
         trayGeometries: trayGeoms,
         boxDimensions: { width: projectBox.customWidth ?? 0, depth: projectBox.customDepth ?? 0, height: layerHeight }
-      };
-    });
+      });
+    }
 
     // Generate geometries for all loose trays across all layers
     cachedAllLooseTrays = [];
@@ -798,6 +822,16 @@ function handleGenerate(msg: GenerateMessage): void {
       const layerHeight = layerHeights.get(layer.id) ?? 0;
 
       for (const looseTray of layer.looseTrays) {
+        // Send progress update
+        currentOperation++;
+        self.postMessage({
+          type: 'generation-progress',
+          id,
+          current: currentOperation,
+          total: totalOperations,
+          currentItem: looseTray.name
+        } as GenerationProgressMessage);
+
         // Calculate tray dimensions for width/depth
         const trayDims = getTrayDimensionsForTray(looseTray, cardSizes, counterShapes);
         // Use layer height for the tray height so loose trays match box exterior height

src/routes/+page.svelte

@@ -26,6 +26,7 @@
   import { jscadToBufferGeometry } from '$lib/utils/jscadToThree';
   import {
     getGeometryWorker,
+    type GenerationProgress,
     type TrayGeometryData,
     type BoxGeometryData,
     type LooseTrayGeometryData
@@ -125,6 +126,7 @@
   let boxGeometry = $state<BufferGeometry | null>(null);
   let lidGeometry = $state<BufferGeometry | null>(null);
   let generating = $state(false);
+  let generationProgress = $state<GenerationProgress | null>(null);
   let geometryWorker = getGeometryWorker();
   let error = $state('');
   let isDirty = $state(false);
@@ -661,6 +663,7 @@
     });
 
     generating = true;
+    generationProgress = null;
     error = '';
 
     // Clear stale geometry when forcing regeneration (structural changes)
@@ -674,7 +677,9 @@
     try {
       // Use web worker for geometry generation (handles both boxed and loose trays)
       // Pass empty string for boxId if it's a loose tray - worker handles this case
-      const result = await geometryWorker.generate(project, box?.id ?? '', tray.id);
+      const result = await geometryWorker.generate(project, box?.id ?? '', tray.id, (progress) => {
+        generationProgress = progress;
+      });
 
       selectedTrayGeometry = result.selectedTrayGeometry;
       selectedTrayCounters = result.selectedTrayCounters;
@@ -696,6 +701,7 @@
       // Don't update state for superseded requests - a newer request will handle it
       if (!wasSuperseded) {
         generating = false;
+        generationProgress = null;
         // Use the hash captured at generation start, not current
         // This prevents marking cache as valid if params changed during generation
         lastGeneratedHash = hashAtGenerationStart;
@@ -1916,7 +1922,13 @@
         {#if generating && !debugParams.hideUI}
           <div class="generatingOverlay">
             <Loader />
-            <div class="generatingText">Generating geometry...</div>
+            <div class="generatingProgress">
+              <span class="generatingProgress__label">Generating</span>
+              <span class="generatingProgress__name">{generationProgress?.currentItem ?? 'geometry...'}</span>
+              {#if generationProgress}
+                <span class="generatingProgress__count">({generationProgress.current}/{generationProgress.total})</span>
+              {/if}
+            </div>
           </div>
         {/if}
 
@@ -2158,7 +2170,13 @@
         {#if generating && !debugParams.hideUI}
           <div class="generatingOverlay">
             <Loader />
-            <div class="generatingText">Generating geometry...</div>
+            <div class="generatingProgress">
+              <span class="generatingProgress__label">Generating</span>
+              <span class="generatingProgress__name">{generationProgress?.currentItem ?? 'geometry...'}</span>
+              {#if generationProgress}
+                <span class="generatingProgress__count">({generationProgress.current}/{generationProgress.total})</span>
+              {/if}
+            </div>
           </div>
         {/if}
 
@@ -2447,8 +2465,31 @@
     background: rgba(0, 0, 0, 0.5);
   }
 
-  .generatingText {
+  .generatingProgress {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
     font-size: 1.125rem;
+    width: 20rem;
+  }
+
+  .generatingProgress__label {
+    flex-shrink: 0;
+  }
+
+  .generatingProgress__name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .generatingProgress__count {
+    flex-shrink: 0;
+    font-family: var(--fontMono, monospace);
+    text-align: right;
+    width: 4.5rem;
   }
 
   /* Resizer styling */