improved my folders display on header

web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue

@@ -8,21 +8,21 @@
         <h5>{{ flag.name }}</h5>
         <div class="actions">
           <span
-            class="mdi mdi-trash-can-outline"
+            class="delete-btn mdi"
+            :class="flagDeletingClassObj"
             :flagid="flag.id"
             @click.prevent="onDeleteFlag"
           />
         </div>
       </li>
-      <li ref="create-flag">
+      <li class="create-flag">
         <input
           placeholder="new folder"
           v-model="new_folder_name"
         />
         <span
-
-          class="mdi mdi-plus-box"
-          v-if="new_folder_name && !is_creating_folder"
+          class="add-btn mdi"
+          :class="addFlagBtnClassObj"
           @click.prevent="onCreateFlag"
         />
       </li>
@@ -38,12 +38,28 @@ export default {
   name: "userFlags",
   data: () => ({
     new_folder_name: "",
-    is_creating_folder: false
+    is_creating_folder: false,
+    is_deleting_folder: false
   }),
   computed: {
     ...mapState({
       flags: state => state.User.flags
-    })
+    }),
+    addFlagBtnClassObj() {
+      return {
+        'mdi-plus-circle-outline': !this.is_creating_folder,
+        'mdi-loading': this.is_creating_folder,
+        active: this.new_folder_name.length > 4 && !this.is_creating_folder,
+        loading: this.is_creating_folder
+      }
+    },
+    flagDeletingClassObj() {
+      return {
+        'mdi-trash-can-outline': !this.is_deleting_folder,
+        'mdi-loading': this.is_deleting_folder,
+        'loading': this.is_deleting_folder
+      }
+    }
   },
   methods: {
     ...mapActions({
@@ -52,19 +68,22 @@ export default {
     }),
     onCreateFlag () {
       console.log("UserFlags onCreateFlag", this.new_folder_name)
+      this.is_creating_folder = true;
       this.createFlag(this.new_folder_name)
         .then(data => {
           console.log("onCreateFlag then", data);
           this.new_folder_name = "";
+          this.is_creating_folder = false;
         })
     },
     onDeleteFlag (e) {
       let flagid = e.target.getAttribute('flagid');
       console.log("UserFlags onDeleteFlag", flagid);
+      this.is_deleting_folder = flagid;
       this.deleteFlag(flagid)
-        .then(data => {
-          console.log("onDeleteFlag then", data);
-          this.new_folder_name = "";
+        .then(() => {
+          // console.log("onDeleteFlag then", data);
+          this.is_deleting_folder = false;
         })
     }
   }