feat: add spinner

Angular2Guy · Nov 14, 2023 · 3c9115c · 3c9115c
1 parent 3ee4540
commit 3c9115c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/frontend/src/angular/src/app/doc-search/doc-search.component.html b/frontend/src/angular/src/app/doc-search/doc-search.component.html
@@ -25,6 +25,13 @@
       	</button>
     </div>	
 </div>
+<div *ngIf="searching" class="spinner-container">	
+<div class="spinner-box">
+	<mat-spinner></mat-spinner>
+	<div i18n="@@searchComponentWorking">The AI is working on the answer.</div>
+	<div i18n="@@searchComponentBePatient">Please be patient. {{ (msWorking / 1000) | number: '1.3'}} sec.</div>
+	</div>	
+</div>
 <div *ngFor="let searchResult of searchResults">
 	{{searchResult}}
 </div>
diff --git a/frontend/src/angular/src/app/doc-search/doc-search.component.scss b/frontend/src/angular/src/app/doc-search/doc-search.component.scss
@@ -49,6 +49,19 @@
 	width: 100%;
 }
 
+.spinner-container {
+	display: flex;
+	align-content: center;
+	justify-content: center;	
+	.spinner-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 10px;	
+		font-size: 24px;	
+	}
+}
+
 @media (max-width: 900px), (max-height: 480px) {
   .custom-toolbar {
     height: fit-content;

diff --git a/frontend/src/angular/src/app/doc-search/doc-search.component.ts b/frontend/src/angular/src/app/doc-search/doc-search.component.ts
@@ -22,18 +22,23 @@ import { Router } from '@angular/router';
 import { DocumentService } from '../service/document.service';
 import { DocumentSearch } from '../model/documents';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { map, tap } from 'rxjs/operators';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; 
+import { interval } from 'rxjs';
 
 
 @Component({
   selector: 'app-doc-search',
   standalone: true,
-  imports: [CommonModule,MatToolbarModule,MatButtonModule,MatTableModule,MatInputModule,MatFormFieldModule,FormsModule,ReactiveFormsModule],
+  imports: [CommonModule,MatToolbarModule,MatButtonModule,MatTableModule,MatInputModule,MatFormFieldModule,FormsModule,ReactiveFormsModule,MatProgressSpinnerModule],
   templateUrl: './doc-search.component.html',
   styleUrls: ['./doc-search.component.scss']
 })
 export class DocSearchComponent {        
 	protected searchValueControl = new FormControl('', [Validators.required, Validators.minLength(3)]);
 	protected searchResults: string[] = [];
+	protected searching = false;
+	protected msWorking = 0;
 
     constructor(private destroyRef: DestroyRef, private router: Router, private documentService: DocumentService) { }
 
@@ -42,8 +47,17 @@ export class DocSearchComponent {
 	}
 
 	protected search(): void {
+		const startDate = new Date();
+		this.msWorking = 0;
+		this.searching = true;
+		const repeatSub = interval(100).pipe(map(() => new Date())).subscribe(newDate => this.msWorking = newDate.getTime() - startDate.getTime());
 		const documentSearch = {searchString: this.searchValueControl.value} as DocumentSearch;
-		this.documentService.postDocumentSearch(documentSearch).pipe(takeUntilDestroyed(this.destroyRef)).subscribe(result => this.searchResults = result.resultStrings);
+		this.documentService.postDocumentSearch(documentSearch)
+		  .pipe(takeUntilDestroyed(this.destroyRef), tap(() => this.searching = false), tap(() => repeatSub.unsubscribe()))
+		  .subscribe(result => {
+			  this.searchResults = result.resultStrings;
+			  //console.log(this.searchResults);
+			  });
 	}
 
 	protected logout(): void {