ActionBar: Deactivate publish button while saving is in progress

src/app/components/actionbar/actionbar.component.html

@@ -3,27 +3,33 @@
     <!-- Publishing option -->
     @if (isAuthenticated() && isEditingAllowed() && isDetailPage()) {
       <div>
-        @if (isPublished()) {
-          <button
-            mat-flat-button
-            color="primary"
-            [matTooltip]="'Published. Click to unpublish!' | translate"
-            (click)="togglePublished()"
-          >
-            <mat-icon>flip_to_back</mat-icon>
-            {{ 'Unpublish' | translate }}
-          </button>
-        } @else {
-          <button
-            mat-flat-button
-            color="primary"
-            [matTooltip]="'Not public. Click to publish!' | translate"
-            (click)="togglePublished()"
-          >
-            <mat-icon>publish</mat-icon>
-            {{ 'Publish!' | translate }}
-          </button>
-        }
+        <button
+          mat-flat-button
+          color="primary"
+          [matTooltip]="
+            (isPublished() ? 'Published. Click to unpublish!' : 'Not public. Click to publish!')
+              | translate
+          "
+          [disabled]="isUpdatingPublishState()"
+          (click)="togglePublished()"
+        >
+          @if (isUpdatingPublishState()) {
+            <ng-container>
+              <mat-progress-spinner mode="indeterminate" diameter="14" />
+              <span>{{ 'Updating' | translate }}...</span>
+            </ng-container>
+          } @else if (isPublished()) {
+            <ng-container>
+              <mat-icon>flip_to_back</mat-icon>
+              <span>{{ 'Unpublish' | translate }}</span>
+            </ng-container>
+          } @else {
+            <ng-container>
+              <mat-icon>publish</mat-icon>
+              <span>{{ 'Publish!' | translate }}</span>
+            </ng-container>
+          }
+        </button>
       </div>
     }
 

src/app/components/actionbar/actionbar.component.ts

@@ -39,6 +39,7 @@ import {
 } from 'src/app/services';
 import { IsUserOfRolePipe } from '../../pipes/is-user-of-role.pipe';
 import { TranslatePipe } from '../../pipes/translate.pipe';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @Component({
   selector: 'app-actionbar',
@@ -54,6 +55,7 @@ import { TranslatePipe } from '../../pipes/translate.pipe';
     MatInputModule,
     MatSelectModule,
     MatAutocompleteModule,
+    MatProgressSpinnerModule,
     ReactiveFormsModule,
     MatOptionModule,
     RouterLink,
@@ -304,25 +306,28 @@ export class ActionbarComponent {
     return element && 'online' in element ? !!element.online : false;
   });
 
+  isUpdatingPublishState = signal(false);
   public async togglePublished() {
+    this.isUpdatingPublishState.set(true);
     const element = this.element();
     if (isEntity(element)) {
-      this.backend
+      await this.backend
         .pushEntity({ ...element, online: !element.online })
         .then(result => {
           console.log('Toggled?:', result);
           if (isEntity(result)) this.updatedElement.set(result);
         })
         .catch(error => console.error(error));
     } else if (isCompilation(element)) {
-      this.backend
+      await this.backend
         .pushCompilation({ ...element, online: !element.online })
         .then(result => {
           console.log('Toggled?:', result);
           if (isCompilation(result)) this.updatedElement.set(result);
         })
         .catch(error => console.error(error));
     }
+    this.isUpdatingPublishState.set(false);
   }
 
   public copyEmbed() {

src/styles.scss

@@ -106,6 +106,22 @@ h5 {
   width: 100%;
 }
 
+// Allows for @if/@else blocks inside of Angular Material buttons
+.mdc-button span.mdc-button__label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+// If progress spinner is inside of a disabled element (e.g. button), adapt color to disabled state
+*[disabled] {
+  @include mat.progress-spinner-overrides(
+    (
+      active-indicator-color: gray,
+    )
+  );
+}
+
 .mat-mdc-fab.mat-primary,
 .mat-mdc-unelevated-button.mat-primary,
 .mat-mdc-mini-fab.mat-primary,