Loading events are now synchronized both ways upon entity action/refresh

platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue

@@ -5,9 +5,12 @@
       <Icon v-bind="value.meta?.icon || {}" v-else />
     </div>
     <div class="component-container">
-      <component :is="component" :value="value"
+      <component :is="component"
+        :value="value"
         @input="$emit('input', $event)"
-        @loading="$emit('loading', $event)" />
+        :loading="loading"
+        @loading="$emit('loading', $event)"
+      />
     </div>
   </div>
 </template>

platypush/backend/http/webapp/src/components/panels/Entities/Index.vue

@@ -42,7 +42,7 @@
                   :value="entity"
                   @input="onEntityInput"
                   :loading="!!loadingEntities[entity.id]"
-                  @loading="loadingEntities[entity.id] = true"
+                  @loading="loadingEntities[entity.id] = $event"
                 />
               </div>
             </div>

platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue

@@ -5,7 +5,8 @@
     </div>
 
     <div class="col-2 switch pull-right">
-      <ToggleSwitch :value="value.state" @input="toggle" />
+      <ToggleSwitch :value="value.state" @input="toggle"
+        :disabled="loading" />
     </div>
   </div>
 </template>
@@ -24,20 +25,26 @@ export default {
       type: Object,
       required: true,
     },
-  },
 
-  data() {
-    return {
-      component: null,
-    }
+    loading: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   methods: {
-    async toggle() {
-      await this.request('entities.execute', {
-        id: this.value.id,
-        action: 'toggle',
-      })
+    async toggle(event) {
+      event.stopPropagation()
+      this.$emit('loading', true)
+
+      try {
+        await this.request('entities.execute', {
+          id: this.value.id,
+          action: 'toggle',
+        })
+      } finally {
+        this.$emit('loading', false)
+      }
     },
   },
 }