frontend/src/app/features/calculator/calculator-page.component.ts

@@ -52,9 +52,11 @@ import { Router } from '@angular/router';
 
         @if (loading()) {
             <app-card class="loading-state">
-                <div class="spinner"></div>
+                <div class="loader-content">
-                <p>Analisi geometria e slicing in corso...</p>
+                    <div class="spinner"></div>
-                <small class="text-muted">Potrebbe richiedere qualche secondo.</small>
+                    <h3 class="loading-title">Analisi in corso...</h3>
+                    <p class="loading-text">Stiamo analizzando la geometria e calcolando il percorso utensile.</p>
+                </div>
             </app-card>
         } @else if (result()) {
           <app-quote-result [result]="result()!" (consult)="onConsult()"></app-quote-result>
@@ -120,19 +122,39 @@ import { Router } from '@angular/router';
     .benefits { padding-left: var(--space-4); color: var(--color-text-muted); line-height: 2; }
     
     .loading-state {
-        text-align: center;
+        display: flex;
-        padding: var(--space-8);
+        align-items: center;
-        color: var(--color-text-muted);
+        justify-content: center;
+        min-height: 300px; /* Match typical result height */
+    }
     
-        .spinner {
+    .loader-content {
-            border: 3px solid rgba(0, 0, 0, 0.1);
+        text-align: center;
-            border-left-color: var(--color-brand);
+        max-width: 300px;
-            border-radius: 50%;
+        margin: 0 auto;
-            width: 32px;
+    }
-            height: 32px;
+    
-            animation: spin 1s linear infinite;
+    .loading-title {
-            margin: 0 auto var(--space-4);
+        font-size: 1.1rem;
-        }
+        font-weight: 600;
+        margin: var(--space-4) 0 var(--space-2);
+        color: var(--color-text);
+    }
+    
+    .loading-text {
+        font-size: 0.9rem;
+        color: var(--color-text-muted);
+        line-height: 1.5;
+    }
+        
+    .spinner {
+        border: 3px solid var(--color-neutral-200);
+        border-left-color: var(--color-brand);
+        border-radius: 50%;
+        width: 48px;
+        height: 48px;
+        animation: spin 1s linear infinite;
+        margin: 0 auto;
     }
     
     @keyframes spin {

frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts

@@ -101,25 +101,22 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
         ></app-input>
       }
 
-      @if (loading()) {
-        <div class="progress-container">
-            <div class="progress-bar">
-                <div class="progress-fill"></div>
-            </div>
-            <p class="progress-text">Uploading & Analyzing...</p>
-        </div>
-      }
-
       <div class="actions">
+        <!-- Progress Bar (Only when loading) -->
+        @if (loading()) {
+            <div class="progress-container">
+                <div class="progress-bar">
+                    <div class="progress-fill"></div>
+                </div>
+                <!-- <p class="progress-text">Uploading & Analyzing...</p> -->
+            </div>
+        }
+
         <app-button 
           type="submit" 
           [disabled]="form.invalid || loading()" 
           [fullWidth]="true">
-          @if (loading()) {
+          {{ loading() ? 'Processing...' : ('CALC.CALCULATE' | translate) }}
-            Slicing in progress...
-          } @else {
-            {{ 'CALC.CALCULATE' | translate }}
-          }
         </app-button>
       </div>
     </form>
@@ -188,19 +185,21 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
 
     /* Progress Bar */
     .progress-container {
-        margin-top: var(--space-4);
+        margin-bottom: var(--space-3);
-        padding: var(--space-4);
+        /* padding: var(--space-2); */
-        background: var(--color-neutral-100);
+        /* background: var(--color-neutral-100); */
-        border-radius: var(--radius-md);
+        /* border-radius: var(--radius-md); */
         text-align: center;
+        width: 100%;
     }
     .progress-bar {
-        height: 6px;
+        height: 4px;
         background: var(--color-border);
-        border-radius: 3px;
+        border-radius: 2px;
         overflow: hidden;
-        margin-bottom: var(--space-2);
+        margin-bottom: 0;
         position: relative;
+        width: 100%;
     }
     .progress-fill {
         height: 100%;