From 7a353a631b4d0fe97e7ebeb51f22cb727fa9493a Mon Sep 17 00:00:00 2001
From: Kai Niebes <kai.niebes@outlook.com>
Date: Mon, 4 May 2026 19:22:30 +0200
Subject: [PATCH 1/2] ActionBar: Deactivate publish button while saving is in
 progress

---
 .../actionbar/actionbar.component.html        | 39 +++++++++----------
 .../actionbar/actionbar.component.ts          |  9 ++++-
 src/styles.scss                               | 16 ++++++++
 3 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/app/components/actionbar/actionbar.component.html b/src/app/components/actionbar/actionbar.component.html
index b4c42b8e..aecfa44a 100644
--- a/src/app/components/actionbar/actionbar.component.html
+++ b/src/app/components/actionbar/actionbar.component.html
@@ -3,27 +3,24 @@
     <!-- 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()) {
+            <mat-progress-spinner mode="indeterminate" diameter="14" />
+            <span>{{ 'Updating' | translate }}...</span>
+          } @else {
+            <mat-icon [fontIcon]="isPublished() ? 'flip_to_back' : 'publish'" />
+            <span>{{ (isPublished() ? 'Unpublish' : 'Publish!') | translate }}</span>
+          }
+        </button>
       </div>
     }
 
diff --git a/src/app/components/actionbar/actionbar.component.ts b/src/app/components/actionbar/actionbar.component.ts
index c3c64b00..e1544df3 100644
--- a/src/app/components/actionbar/actionbar.component.ts
+++ b/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,10 +306,12 @@ 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);
@@ -315,7 +319,7 @@ export class ActionbarComponent {
         })
         .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);
@@ -323,6 +327,7 @@ export class ActionbarComponent {
         })
         .catch(error => console.error(error));
     }
+    this.isUpdatingPublishState.set(false);
   }
 
   public copyEmbed() {
diff --git a/src/styles.scss b/src/styles.scss
index a334388d..f24e488f 100644
--- a/src/styles.scss
+++ b/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,

From 9833df55ac6a35d0cb7391296b87706777a9afa6 Mon Sep 17 00:00:00 2001
From: Kai Niebes <kai.niebes@outlook.com>
Date: Fri, 29 May 2026 19:02:05 +0200
Subject: [PATCH 2/2] Fix warning

---
 .../actionbar/actionbar.component.html          | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/components/actionbar/actionbar.component.html b/src/app/components/actionbar/actionbar.component.html
index aecfa44a..6c65a36a 100644
--- a/src/app/components/actionbar/actionbar.component.html
+++ b/src/app/components/actionbar/actionbar.component.html
@@ -14,11 +14,20 @@
           (click)="togglePublished()"
         >
           @if (isUpdatingPublishState()) {
-            <mat-progress-spinner mode="indeterminate" diameter="14" />
-            <span>{{ 'Updating' | translate }}...</span>
+            <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 {
-            <mat-icon [fontIcon]="isPublished() ? 'flip_to_back' : 'publish'" />
-            <span>{{ (isPublished() ? 'Unpublish' : 'Publish!') | translate }}</span>
+            <ng-container>
+              <mat-icon>publish</mat-icon>
+              <span>{{ 'Publish!' | translate }}</span>
+            </ng-container>
           }
         </button>
       </div>