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;
         })
     }
   }

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -175,35 +175,43 @@ export default {
     // https://drupal.stackexchange.com/questions/248539/cant-get-flagging-api-to-accept-post-request
     createFlag({ dispatch, commit, state }, new_flag_name) {
       console.log("user createFlag", new_flag_name);
-      const params = {
-        name: new_flag_name
-      };
-      return MA.post("materio_flag/create_user_flagging_collection", params)
-        .then(({ data }) => {
-          console.log("user MA createFlag data", data);
-          if (data.status) {
-            dispatch('getUserFlags');
-          }
-        })
-        .catch(error => {
-          console.warn("Issue USER MA createFlag", error);
-          Promise.reject(error);
-        });
+      return new Promise((resolve, reject) => {
+        const params = {
+          name: new_flag_name
+        };
+        MA.post("materio_flag/create_user_flagging_collection", params)
+          .then(({ data }) => {
+            console.log("user MA createFlag data", data);
+            if (data.status) {
+              dispatch('getUserFlags').then(() => {
+                resolve();
+              })
+            }
+          })
+          .catch(error => {
+            console.warn("Issue USER MA createFlag", error);
+            reject(error);
+          });
+      });
     },
     deleteFlag({ dispatch, commit, state }, flagid) {
       console.log("user deleteFlag", flagid);
-      const params = {
-        flagid: flagid
-      };
-      return MA.post("materio_flag/delete_user_flagging_collection", params)
-        .then(({ data }) => {
-          console.log("user MA deleteFlag data", data);
-          dispatch('getUserFlags');
-        })
-        .catch(error => {
-          console.warn("Issue USER MA createFlag", error);
-          Promise.reject(error);
-        });
+      return new Promise((resolve, reject) => {
+        const params = {
+          flagid: flagid
+        };
+        MA.post("materio_flag/delete_user_flagging_collection", params)
+          .then(({ data }) => {
+            console.log("user MA deleteFlag data", data);
+            dispatch('getUserFlags').then(() =>{
+              resolve();
+            });
+          })
+          .catch(error => {
+            console.warn("Issue USER MA createFlag", error);
+            reject(error);
+          });
+      });
     },
     userLogout({ commit, state }) {
       const credentials = qs.stringify({