Blink entities only if their values have actually changed

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

@@ -26,6 +26,16 @@ export default {
     }
   },
 
+  methods: {
+    valuesEqual(a, b) {
+      a = {...a}
+      b = {...b}
+      delete a.updated_at
+      delete b.updated_at
+      return this.objectsEqual(a, b)
+    },
+  },
+
   mounted() {
     if (this.type !== 'Entity') {
       const type = this.type.split('_').map((t) =>
@@ -34,7 +44,10 @@ export default {
 
       this.$watch(
           () => this.value,
-          () => {
+          (newValue, oldValue) => {
+              if (this.valuesEqual(oldValue, newValue))
+                return false
+
               this.justUpdated = true
               const self = this;
               setTimeout(() => self.justUpdated = false, 1000)
@@ -63,8 +76,16 @@ export default {
 }
 
 @keyframes blink-animation {
-  to {
+  0% {
+    background: initial
+  }
+
+  50% {
     background: $active-bg;
   }
+
+  100% {
+    background: initial
+  }
 }
 </style>

platypush/backend/http/webapp/src/utils/Types.vue

@@ -36,7 +36,37 @@ export default {
       })
 
       return `${value.toFixed(2)} ${unit}`
+    },
+
+    objectsEqual(a, b) {
+      if (typeof(a) !== 'object' || typeof(b) !== 'object')
+        return false
+
+      for (const p of Object.keys(a || {})) {
+        switch(typeof(a[p])) {
+          case 'object':
+            if (!this.objectsEqual(a[p], b[p]))
+              return false
+            break
+
+          case 'function':
+            if (a[p].toString() != b[p]?.toString())
+              return false
+            break
+
+          default:
+            if (a[p] != b[p])
+              return false
+            break
         }
+      }
+
+      for (const p of Object.keys(b || {}))
+        if (a[p] == null && b[p] != null)
+          return false
+
+      return true
+    },
   },
 }
 </script>