feat: loading indication

apps/NwaifuAnime/src/app/components/home/home.component.html

@@ -1,5 +1,11 @@
 <h1>It's home component</h1>
 <div class="flex flex-col items-center w-full px-3">
+  @if (loading) {
+    <h1>Loading...</h1>
+  }
+  @if (notFound && !loading) {
+    <h1>Not found</h1>
+  }
   @for (item of items; track $index) {
     <a
       routerLink="/detail"

apps/NwaifuAnime/src/app/components/home/home.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { AfterViewInit, Component, Input, OnDestroy } from "@angular/core";
+import { Component, Input, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, RouterLink } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
 import { Datum } from "../../services/parsers/rulib/rulib.search.dto";
@@ -12,8 +12,10 @@ import { SearchService } from "../../services/search.service";
   styleUrls: ["./home.component.less"],
   imports: [CommonModule, RouterLink],
 })
-export class HomeComponent implements OnDestroy, AfterViewInit {
+export class HomeComponent implements OnDestroy, OnInit {
   @Input() items: Datum[] = [];
+  loading = false;
+  notFound = false;
 
   private destroy$ = new Subject<void>();
 
@@ -27,15 +29,18 @@ export class HomeComponent implements OnDestroy, AfterViewInit {
     this.destroy$.complete();
   }
 
-  ngAfterViewInit(): void {
+  ngOnInit(): void {
     this.route.queryParams.subscribe((params) => {
       const search = params["search"];
       if (search) {
+        this.loading = true;
         this.searchService
           .search(search)
           .pipe(takeUntil(this.destroy$))
           .subscribe((data) => {
+            this.loading = false;
             this.items = data.data;
+            this.notFound = this.items.length === 0;
           });
       }
     });