V1 done still need to work on SSR

src/app/components/calendar-year/calendar-year.html

@@ -1,4 +1,12 @@
 <div class="calendar-year">
+	@if (isLoading()) {
+	<div class="loading-overlay">
+		<div class="loading-spinner">
+			<div class="spinner"></div>
+			<p>Calcul en cours...</p>
+		</div>
+	</div>
+	}
 	@for (month of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; track $index) {
 	<mat-card>
 		<mat-card-content>

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

@@ -5,4 +5,52 @@
 	justify-content: center;
 	gap: 16px;
 	max-width: 60vw;
+	position: relative;
+}
+
+.loading-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(255, 255, 255, 0.9);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 4px;
+	z-index: 1000;
+}
+
+.loading-spinner {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+
+	p {
+		font-size: 16px;
+		font-weight: 500;
+		color: #333;
+		margin: 0;
+	}
+}
+
+.spinner {
+	width: 40px;
+	height: 40px;
+	border: 4px solid #f3f3f3;
+	border-top: 4px solid #3498db;
+	border-radius: 50%;
+	animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
 }

src/app/components/calendar-year/calendar-year.ts

@@ -1,18 +1,32 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, effect, signal } from '@angular/core';
 import { UserInputService } from '../../services/user-input-service';
-import { DateRange } from '@angular/material/datepicker';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { CalendarMonth } from "../calendar-month/calendar-month";
 import { CalendarService, SelectedDates, VacationsNumber } from '../../services/calendar-service';
+import { CommonModule } from '@angular/common';
 
 @Component({
 	selector: 'app-calendar-year',
-	imports: [MatCard, CalendarMonth, MatCardContent],
+	imports: [MatCard, CalendarMonth, MatCardContent, CommonModule],
 	templateUrl: './calendar-year.html',
 	styleUrl: './calendar-year.scss',
 })
 export class CalendarYear implements OnInit {
+	protected isLoading = signal(true);
+
 	constructor(private userInput: UserInputService, private calendarService: CalendarService) {
+		effect(() => {
+			this.selectedDates = this.calendarService.getSelectedDatesForYear(this.year);
+			const vacationData = this.userInput.vacationNumberSignal();
+			this.isLoading.set(true);
+			// Simulate server-side calculation with a small delay
+			setTimeout(() => {
+				if (this.selectedDates) {
+					this.selectedDates.optimizeVacations(vacationData);
+				}
+				this.isLoading.set(false);
+			}, 500);
+		});
 	}
 
 	protected selectedDates: SelectedDates = new SelectedDates();
@@ -21,9 +35,6 @@ export class CalendarYear implements OnInit {
 
 	ngOnInit(): void {
 		this.selectedDates = this.calendarService.getSelectedDatesForYear(this.year);
-		const vacationsNumber: VacationsNumber = {
-			cp: 10, rtt: 5, other: 0
-		};
-		this.selectedDates.optimizeVacations(vacationsNumber);
+		this.isLoading.set(false);
 	}
 }