feat: enhance loading spinner with progress indication and add warnin… (#49)

* feat: enhance loading spinner with progress indication and add warning for unplaced vacation days

* Update src/app/services/calendar-service.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/app/components/calendar-year/calendar-year.scss

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update src/app/components/user-input/user-input.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix setTimeout async anti-pattern in calendar-year component (#50)

* Initial plan

* fix: replace setTimeout async anti-pattern with queueMicrotask and void

Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

src/app/components/user-input/user-input.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, effect } from '@angular/core';
+import { Component, OnInit, OnDestroy, effect, computed } from '@angular/core';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -6,6 +6,8 @@ import { UserInputService } from '../../services/user-input-service';
 import { VacationsNumber } from '../../services/calendar-service';
 import { debounceTime, takeUntil, Subject } from 'rxjs';
 import { CalendarSettings } from '../calendar-settings/calendar-settings';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
 	selector: 'app-user-input',
@@ -15,7 +17,9 @@ import { CalendarSettings } from '../calendar-settings/calendar-settings';
 		MatInputModule,
 		ReactiveFormsModule,
 		CalendarSettings,
-		CalendarSettings,
+		MatCard,
+		MatCardContent,
+		MatIcon,
 	],
 	templateUrl: './user-input.html',
 	styleUrl: './user-input.scss',
@@ -44,6 +48,13 @@ export class UserInput implements OnInit, OnDestroy {
 		Others: new FormControl<number | null>(null),
 	});
 
+	protected remainingDays = computed(() => {
+		const remaining = this.userInputService.remainingVacationDaysSignal();
+		return remaining.cp + remaining.rtt + remaining.other;
+	});
+
+	protected hasRemainingDays = computed(() => this.remainingDays() > 0);
+
 	ngOnInit() {
 		this.userInputForm.valueChanges
 			.pipe(debounceTime(1500), takeUntil(this.destroy$))