diff --git a/frontend/src/app/features/calculator/calculator-page.component.ts b/frontend/src/app/features/calculator/calculator-page.component.ts index 80f9028..f48349c 100644 --- a/frontend/src/app/features/calculator/calculator-page.component.ts +++ b/frontend/src/app/features/calculator/calculator-page.component.ts @@ -52,9 +52,11 @@ import { Router } from '@angular/router'; @if (loading()) { -
-

Analisi geometria e slicing in corso...

- Potrebbe richiedere qualche secondo. +
+
+

Analisi in corso...

+

Stiamo analizzando la geometria e calcolando il percorso utensile.

+
} @else if (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 { + display: flex; + align-items: center; + justify-content: center; + min-height: 300px; /* Match typical result height */ + } + + .loader-content { text-align: center; - padding: var(--space-8); + max-width: 300px; + margin: 0 auto; + } + + .loading-title { + 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 rgba(0, 0, 0, 0.1); - border-left-color: var(--color-brand); - border-radius: 50%; - width: 32px; - height: 32px; - animation: spin 1s linear infinite; - margin: 0 auto var(--space-4); - } + .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 { diff --git a/frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts b/frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts index db47723..a7664b1 100644 --- a/frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts +++ b/frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts @@ -101,25 +101,22 @@ import { QuoteRequest } from '../../services/quote-estimator.service'; > } - @if (loading()) { -
-
-
-
-

Uploading & Analyzing...

-
- } -
+ + @if (loading()) { +
+
+
+
+ +
+ } + - @if (loading()) { - Slicing in progress... - } @else { - {{ 'CALC.CALCULATE' | translate }} - } + {{ loading() ? 'Processing...' : ('CALC.CALCULATE' | translate) }}
@@ -188,19 +185,21 @@ import { QuoteRequest } from '../../services/quote-estimator.service'; /* Progress Bar */ .progress-container { - margin-top: var(--space-4); - padding: var(--space-4); - background: var(--color-neutral-100); - border-radius: var(--radius-md); + margin-bottom: var(--space-3); + /* padding: var(--space-2); */ + /* background: var(--color-neutral-100); */ + /* 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%;