From f8d4877c6b8cc0a586e08e0bcd1ecc80ae02a3d1 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 1 Apr 2024 00:14:19 -0700
Subject: [PATCH] Loading indicator, hide shortcut key on focus

---
 .../app-frame/global-search/global-search.component.html  | 8 +++++++-
 .../app-frame/global-search/global-search.component.scss  | 5 +++--
 .../app-frame/global-search/global-search.component.ts    | 3 +++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.html b/src-ui/src/app/components/app-frame/global-search/global-search.component.html
index 8b481b0a5..956b6681c 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.html
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.html
@@ -5,7 +5,13 @@
     <input #searchInput class="form-control form-control-sm" type="text" name="query"
         autocomplete="off" placeholder="Search" aria-label="Search" i18n-placeholder
         [(ngModel)]="query" (ngModelChange)="this.queryDebounce.next($event)" (keyup)="searchInputKeyDown($event)" ngbDropdownAnchor>
-    <span class="badge d-none d-lg-inline text-muted position-absolute top-50 start-100 translate-middle ms-n4 fw-normal">⌘K</span>
+    <div class="position-absolute top-50 end-0 translate-middle">
+            <span class="badge d-none d-lg-inline text-muted position-absolute top-50 start-100 translate-middle ms-n4 fw-normal">⌘K</span>
+            @if (loading) {
+                <div class="spinner-border spinner-border-sm text-muted mt-1"></div>
+            }
+    </div>
+
 </form>
 
 <ng-template #resultItemTemplate let-item="item" let-nameProp="nameProp" let-type="type" let-icon="icon">
diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.scss b/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
index 411dfec65..9e08f3664 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.scss
@@ -14,8 +14,9 @@ form {
   }
 
   &:focus-within {
-    i-bs {
-      display: none;
+    i-bs,
+    .badge {
+      display: none !important;
     }
 
     .form-control::placeholder {
diff --git a/src-ui/src/app/components/app-frame/global-search/global-search.component.ts b/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
index c37e02c12..7d8992677 100644
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.ts
@@ -44,6 +44,7 @@ export class GlobalSearchComponent {
   public queryDebounce: Subject<string>
   public searchResults: GlobalSearchResult
   private currentItemIndex: number = -1
+  public loading: boolean = false
 
   @ViewChild('searchInput') searchInput: ElementRef
   @ViewChild('resultsDropdown') resultsDropdown: NgbDropdown
@@ -103,8 +104,10 @@ export class GlobalSearchComponent {
   }
 
   private search(query: string) {
+    this.loading = true
     this.searchService.globalSearch(query).subscribe((results) => {
       this.searchResults = results
+      this.loading = false
       this.resultsDropdown.open()
     })
   }