Loading indicator, hide shortcut key on focus

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">

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 {

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()
     })
   }