V1 done still need to work on SSR

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);
 	}
 }