BulmaButton "busy" animation

ui/src/components/AdminButton.vue

@@ -9,6 +9,7 @@
     class="button is-light"
     @click.left="on_click"
     :icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
+    :busy="is_busy"
     text="Admin"
   />
 </template>
@@ -33,6 +34,7 @@ export default class extends Vue {
   // true, iff Benutzer Admin ist
   public modelValue!: boolean;
   public modal_visible = false;
+  public is_busy = false;
 
   public on_click() {
     if (this.modelValue) {
@@ -41,6 +43,7 @@ export default class extends Vue {
       this.$emit("update:modelValue", false);
     } else {
       // show login modal
+      this.is_busy = true;
       this.modal_visible = true;
     }
   }
@@ -49,9 +52,10 @@ export default class extends Vue {
     this.modal_visible = false;
     this.$advent22.set_api_auth(username, password);
 
-    this.$advent22
-      .api_get<boolean>("admin/is_admin")
-      .then((is_admin) => this.$emit("update:modelValue", is_admin));
+    this.$advent22.api_get<boolean>("admin/is_admin").then((is_admin) => {
+      this.$emit("update:modelValue", is_admin);
+      this.is_busy = false;
+    });
   }
 }
 </script>

ui/src/components/bulma/Button.vue

@@ -1,7 +1,7 @@
 <template>
   <button class="button">
     <span v-if="icon !== undefined" class="icon">
-      <font-awesome-icon :icon="icon" />
+      <font-awesome-icon :icon="icon" :beat-fade="busy" />
     </span>
     <span v-if="text !== ''">{{ text }}</span>
   </button>
@@ -21,10 +21,16 @@ import { Options, Vue } from "vue-class-component";
       required: false,
       default: "",
     },
+    busy: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 })
 export default class extends Vue {
   public icon?: string;
   public text!: string;
+  public busy!: boolean;
 }
 </script>