From 9940e6bb7a5c79caeaf231cfde8774b5efc8b8eb Mon Sep 17 00:00:00 2001
From: Anuradha Wickramarachchi <anuradhawick@gmail.com>
Date: Mon, 9 Dec 2024 23:09:08 +0000
Subject: [PATCH] FIX: enhance projects list with loading state and no projects
 found message

---
 .../projects-list/projects-list.component.html             | 7 ++++---
 .../admin-section/projects-list/projects-list.component.ts | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.html b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.html
index ac04444..9fa2d48 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.html
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.html
@@ -1,6 +1,5 @@
-@if (loading) {
-  <app-component-spinner [loading]="true" class="min-h-[400px] block" />
-} @else {
+<app-component-spinner [loading]="loading" />
+@if (dataSource.data.length > 0) {
   <br />
   <table mat-table [dataSource]="dataSource">
     <!-- Name Column -->
@@ -66,6 +65,8 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
+} @else {
+  <h3>No projects found</h3>
 }
 <br />
 <div class="flex flex-row space-x-[10px] items-center">
diff --git a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.ts b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.ts
index a105ae9..07a3caa 100644
--- a/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.ts
+++ b/webgui/webapp/src/app/pages/portal-page/dportal-page/admin-section/projects-list/projects-list.component.ts
@@ -69,6 +69,8 @@ export class ProjectsListComponent {
   }
 
   list() {
+    this.loading = true;
+    this.dataSource.data = [];
     this.dps
       .getAdminProjects()
       .pipe(catchError(() => of(null)))