From 20530c2b6dc0326136d87cd142e752875ec7036c Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <info@fabiomanganiello.com>
Date: Tue, 12 Apr 2022 01:10:09 +0200
Subject: [PATCH] Loading events are now synchronized both ways upon entity
 action/refresh

---
 .../src/components/panels/Entities/Entity.vue |  7 +++--
 .../src/components/panels/Entities/Index.vue  |  2 +-
 .../src/components/panels/Entities/Switch.vue | 29 ++++++++++++-------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
index bf46a2f809..4d0fb780bf 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
+++ b/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>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
index f10481b165..41a01014b8 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/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>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue
index 7d49dcf2cd..87380890c3 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue
+++ b/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)
+      }
     },
   },
 }