From 5465d1635c4a0f5e4ac39ce36fc497cbf76d9101 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Thu, 18 Jul 2024 16:50:48 +0300
Subject: [PATCH] feat: loading indication

---
 .../src/app/components/home/home.component.html       |  6 ++++++
 .../src/app/components/home/home.component.ts         | 11 ++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/NwaifuAnime/src/app/components/home/home.component.html b/apps/NwaifuAnime/src/app/components/home/home.component.html
index 4485005..fe14cb8 100644
--- a/apps/NwaifuAnime/src/app/components/home/home.component.html
+++ b/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"
diff --git a/apps/NwaifuAnime/src/app/components/home/home.component.ts b/apps/NwaifuAnime/src/app/components/home/home.component.ts
index 011815d..6f8025a 100644
--- a/apps/NwaifuAnime/src/app/components/home/home.component.ts
+++ b/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;
           });
       }
     });