Add loading indicator; dismiss modals correctly

Author: XanderVertegaal

frontend/src/app/annotate/annotation-input/problem-details/problem-labels/manage-labels-modal/manage-labels-modal.component.html

@@ -5,7 +5,7 @@ <h5 class="modal-title" i18n>Manage Labels</h5>
         class="btn-close"
         aria-label="Close"
         i18n-aria-label
-        (click)="closeModal()"
+        (click)="activeModal.dismiss()"
     ></button>
 </div>
 <div class="modal-body">
@@ -63,6 +63,15 @@ <h6 i18n>Available labels</h6>
             </tr>
         </thead>
         <tbody>
+            @if (loadingLabels$ | async) {
+            <tr>
+                <td colspan="3" class="text-center py-3">
+                    <div class="spinner-border spinner-border-sm text-secondary" role="status">
+                        <span class="visually-hidden" i18n>Loading labels...</span>
+                    </div>
+                </td>
+            </tr>
+            } @else {
             @for (label of availableLabels$ | async; track label.id) {
             <tr class="clickable-row align-middle" (click)="addLabel(label.id)">
                 <td>
@@ -84,6 +93,7 @@ <h6 i18n>Available labels</h6>
                 </td>
             </tr>
             }
+            }
         </tbody>
     </table>
 
@@ -107,7 +117,7 @@ <h6 i18n>Available labels</h6>
     <button
         type="button"
         class="btn btn-secondary"
-        (click)="closeModal({ save: false })"
+        (click)="activeModal.dismiss()"
         i18n
     >
         Close

frontend/src/app/annotate/annotation-input/problem-details/problem-labels/manage-labels-modal/manage-labels-modal.component.ts

@@ -60,6 +60,11 @@ export class ManageLabelsModalComponent implements OnInit {
         })
     );
 
+    public loadingLabels$ = this.availableLabels$.pipe(
+        map(() => false),
+        startWith(true)
+    );
+
     constructor(public activeModal: NgbActiveModal) { }
 
     ngOnInit(): void {
@@ -113,11 +118,7 @@ export class ManageLabelsModalComponent implements OnInit {
         this.addLabelSubject.next(labelId);
     }
 
-    public closeModal(options: { save: boolean; } = { save: true }): void {
-        if (!options.save) {
-            this.activeModal.dismiss();
-            return;
-        }
+    public closeModal(): void {
         this.activeModal.close(this.form.getRawValue());
     }