From b77a219e1935fcc2fe7aad97c5cec605a8ee68a4 Mon Sep 17 00:00:00 2001
From: gbrodman <gbrodman@google.com>
Date: Thu, 6 Jun 2024 16:35:20 -0400
Subject: [PATCH] Move domain-list search+download outside of loading bar
 (#2457)

This means that they'll stick around even while we're loading domains
from the server.

https://b.corp.google.com/issues/343213150
---
 .../src/app/domains/domainList.component.html | 114 ++++++++++--------
 .../src/app/domains/domainList.component.scss |  14 +++
 .../src/app/domains/domainList.component.ts   |   9 +-
 3 files changed, 79 insertions(+), 58 deletions(-)

diff --git a/console-webapp/src/app/domains/domainList.component.html b/console-webapp/src/app/domains/domainList.component.html
index 94bfcdcfb..9be39b8d4 100644
--- a/console-webapp/src/app/domains/domainList.component.html
+++ b/console-webapp/src/app/domains/domainList.component.html
@@ -1,18 +1,6 @@
 <app-selected-registrar-wrapper>
   <div class="console-domains">
     <h1 class="mat-headline-4">Domains</h1>
-    @if (totalResults === 0) {
-    <div class="console-app__empty-domains">
-      <h1>
-        <mat-icon class="console-app__empty-domains-icon secondary-text"
-          >apps_outage</mat-icon
-        >
-      </h1>
-      <h1>No domains found</h1>
-    </div>
-    } @else if(isLoading) {
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-    } @else {
     <a
       mat-stroked-button
       color="primary"
@@ -31,55 +19,75 @@
         matInput
         [(ngModel)]="searchTerm"
         (ngModelChange)="sendInput()"
+        [disabled]="isLoading"
         #input
       />
     </mat-form-field>
-    <mat-table
-      [dataSource]="dataSource"
-      class="mat-elevation-z0"
-      class="console-app__domains-table"
-    >
-      <ng-container matColumnDef="domainName">
-        <mat-header-cell *matHeaderCellDef>Domain Name</mat-header-cell>
-        <mat-cell *matCellDef="let element">{{ element.domainName }}</mat-cell>
-      </ng-container>
+    @if (!isLoading && totalResults == 0) {
+    <div class="console-app__empty-domains">
+      <h1>
+        <mat-icon class="console-app__empty-domains-icon secondary-text"
+          >apps_outage</mat-icon
+        >
+      </h1>
+      <h1>No domains found</h1>
+    </div>
+    } @else {
+    <div class="console-app__domains-table-parent">
+      @if (isLoading) {
+      <div class="console-app__domains-spinner">
+        <mat-spinner />
+      </div>
+      }
+      <mat-table
+        [dataSource]="dataSource"
+        class="mat-elevation-z0"
+        class="console-app__domains-table"
+      >
+        <ng-container matColumnDef="domainName">
+          <mat-header-cell *matHeaderCellDef>Domain Name</mat-header-cell>
+          <mat-cell *matCellDef="let element">{{
+            element.domainName
+          }}</mat-cell>
+        </ng-container>
 
-      <ng-container matColumnDef="creationTime">
-        <mat-header-cell *matHeaderCellDef>Creation Time</mat-header-cell>
-        <mat-cell *matCellDef="let element">
-          {{ element.creationTime.creationTime }}
-        </mat-cell>
-      </ng-container>
+        <ng-container matColumnDef="creationTime">
+          <mat-header-cell *matHeaderCellDef>Creation Time</mat-header-cell>
+          <mat-cell *matCellDef="let element">
+            {{ element.creationTime.creationTime }}
+          </mat-cell>
+        </ng-container>
 
-      <ng-container matColumnDef="registrationExpirationTime">
-        <mat-header-cell *matHeaderCellDef>Expiration Time</mat-header-cell>
-        <mat-cell *matCellDef="let element">
-          {{ element.registrationExpirationTime }}
-        </mat-cell>
-      </ng-container>
+        <ng-container matColumnDef="registrationExpirationTime">
+          <mat-header-cell *matHeaderCellDef>Expiration Time</mat-header-cell>
+          <mat-cell *matCellDef="let element">
+            {{ element.registrationExpirationTime }}
+          </mat-cell>
+        </ng-container>
 
-      <ng-container matColumnDef="statuses">
-        <mat-header-cell *matHeaderCellDef>Statuses</mat-header-cell>
-        <mat-cell *matCellDef="let element">{{ element.statuses }}</mat-cell>
-      </ng-container>
+        <ng-container matColumnDef="statuses">
+          <mat-header-cell *matHeaderCellDef>Statuses</mat-header-cell>
+          <mat-cell *matCellDef="let element">{{ element.statuses }}</mat-cell>
+        </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
 
-      <!-- Row shown when there is no matching data. -->
-      <mat-row *matNoDataRow>
-        <mat-cell colspan="4">No domains found</mat-cell>
-      </mat-row>
-    </mat-table>
-    <mat-paginator
-      [length]="totalResults"
-      [pageIndex]="pageNumber"
-      [pageSize]="resultsPerPage"
-      [pageSizeOptions]="[10, 25, 50, 100, 500]"
-      (page)="onPageChange($event)"
-      aria-label="Select page of domain results"
-      showFirstLastButtons
-    ></mat-paginator>
+        <!-- Row shown when there is no matching data. -->
+        <mat-row *matNoDataRow>
+          <mat-cell colspan="4">No domains found</mat-cell>
+        </mat-row>
+      </mat-table>
+      <mat-paginator
+        [length]="totalResults"
+        [pageIndex]="pageNumber"
+        [pageSize]="resultsPerPage"
+        [pageSizeOptions]="[10, 25, 50, 100, 500]"
+        (page)="onPageChange($event)"
+        aria-label="Select page of domain results"
+        showFirstLastButtons
+      ></mat-paginator>
+    </div>
     }
   </div>
 </app-selected-registrar-wrapper>
diff --git a/console-webapp/src/app/domains/domainList.component.scss b/console-webapp/src/app/domains/domainList.component.scss
index 9a72dd8b2..86b50ba0e 100644
--- a/console-webapp/src/app/domains/domainList.component.scss
+++ b/console-webapp/src/app/domains/domainList.component.scss
@@ -31,10 +31,24 @@
     width: 100%;
   }
 
+  &__domains-table-parent {
+    position: relative;
+  }
+
   &__domains-table {
     min-width: $min-width !important;
   }
 
+  &__domains-spinner {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.6);
+  }
+
   .mat-mdc-paginator {
     min-width: $min-width !important;
   }
diff --git a/console-webapp/src/app/domains/domainList.component.ts b/console-webapp/src/app/domains/domainList.component.ts
index f4ac8dc4e..06cc5429e 100644
--- a/console-webapp/src/app/domains/domainList.component.ts
+++ b/console-webapp/src/app/domains/domainList.component.ts
@@ -58,11 +58,10 @@ export class DomainListComponent {
     private _snackBar: MatSnackBar
   ) {
     effect(() => {
-      if (this.registrarService.registrarId()) {
-        this.pageNumber = 0;
-        this.totalResults = 0;
-        this.reloadData();
-      }
+      this.pageNumber = 0;
+      this.totalResults = 0;
+      this.reloadData();
+      this.registrarService.registrarId();
     });
   }