feat: add loading indicators for users and todos

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