From dda69b680e4bf95d7f604dbf518707cf4d3ffdb3 Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Tue, 6 May 2025 08:55:58 +0200
Subject: [PATCH] feat: add loading indicators for users and todos

---
 src/app/app.component.html | 12 ++++++++++--
 src/app/app.component.ts   | 17 +++++++++++------
 src/app/user.service.ts    | 18 +++++++++++++-----
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index dfa99d7..0c8b06d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,13 +1,21 @@
+<ng-container *ngIf="isLoadingUsers()">
+    <p>Loading...</p>
+</ng-container>
+<ng-container *ngIf="!isLoadingUsers()">
 <select id="userId" (change)="onUserSelect($event)">
   <ng-container *ngFor="let user of users()">
     <option [value]="user.id">{{user.name}}</option>
   </ng-container>
 </select>
+</ng-container>
 
-<ng-container *ngIf="selectedUserId() !== null && todos()">
+<ng-container *ngIf="isLoadingTodos()">
+  <p>Loading...</p>
+</ng-container>
+<div *ngIf="!isLoadingTodos() && selectedUserId() !== null && todos()">
   <select id="todoId">
     <ng-container *ngFor="let todo of todos()">
       <option [value]="todo.id">{{todo.title}}</option>
     </ng-container>
   </select>
-</ng-container>
+</div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 72d6e84..b024a3d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -20,18 +20,23 @@ export class AppComponent {
   users: WritableSignal<any[]> = signal([]);
   
   todos: WritableSignal<any[]> = signal([]);
+
+  isLoadingUsers = signal(true);
+  isLoadingTodos = signal(false);
   
   ngOnInit() {
-    this.userService.getUsers().subscribe(users => this.users.set(users));
-    
-    if(this.selectedUserId() !== null) {
-      this.userService.getTodos(this.selectedUserId()!).subscribe(todos => this.todos.set(todos));
-    }
+    this.userService.getUsers().subscribe(users => {
+      this.users.set(users);
+    });
   }
   
   onUserSelect(event: Event) {
+    this.isLoadingTodos.set(true)
     const userId = Number((event.target as HTMLSelectElement).value);
     this.selectedUserId.set(userId);
-    this.userService.getTodos(userId).subscribe(todos => this.todos.set(todos));
+    this.userService.getTodos(userId).subscribe(todos => {
+      this.todos.set(todos)
+      this.isLoadingTodos.set(false)
+    });
   }
 }
diff --git a/src/app/user.service.ts b/src/app/user.service.ts
index 08b31a5..c50fdb0 100644
--- a/src/app/user.service.ts
+++ b/src/app/user.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, shareReplay } from 'rxjs';
+import { delay, Observable, shareReplay } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -9,18 +9,26 @@ export class UserService {
   constructor(private http: HttpClient) {}
 
   getUsers(): Observable<any[]> {
-    return this.http.get<any[]>('https://jsonplaceholder.typicode.com/users')
+    return this.http.get<any[]>('https://jsonplaceholder.typicode.com/users').pipe(
+      delay(1000)
+    )
   }
 
   getUser(id: number): Observable<any> {
-    return this.http.get<any>(`https://jsonplaceholder.typicode.com/users/${id}`)
+    return this.http.get<any>(`https://jsonplaceholder.typicode.com/users/${id}`).pipe(
+      delay(1000)
+    )
   }
 
   getTodos(userId: number): Observable<any[]> {
-    return this.http.get<any[]>(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`)
+    return this.http.get<any[]>(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`).pipe(
+      delay(1000)
+    )
   }
 
   getTodo(id: number): Observable<any> {
-    return this.http.get<any>(`https://jsonplaceholder.typicode.com/todos/${id}`)
+    return this.http.get<any>(`https://jsonplaceholder.typicode.com/todos/${id}`).pipe(
+      delay(1000)
+    )
   }
 }