From 2778357a9e4dfd7b0c55b6c5b901db1bdc05074a Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 14 Jan 2023 22:31:48 +0100
Subject: [PATCH] Wrapped dynamic Vue components in shallowRef.

The performance of the page is heavily degraded by components loaded
dynamically via defineAsyncComponent that recursively carry behind the
whole Vue machinery.

By wrapping defineAsyncComponent calls in shallowRef we make sure that
we only wire the root level of the newly created dynamic component.
---
 .../http/webapp/src/components/panels/Entities/Entity.vue | 8 +++++---
 .../http/webapp/src/components/widgets/Plugin/Index.vue   | 4 ++--
 platypush/backend/http/webapp/src/views/Dashboard.vue     | 6 ++++--
 platypush/backend/http/webapp/src/views/Panel.vue         | 4 ++--
 platypush/backend/http/webapp/src/views/Plugin.vue        | 6 +++---
 5 files changed, 16 insertions(+), 12 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 722f2a65..99cb7bcd 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 import EntityMixin from "./EntityMixin"
 
 export default {
@@ -96,8 +96,10 @@ export default {
           }
       )
 
-      this.component = defineAsyncComponent(
-        () => import(`@/components/panels/Entities/${type}`)
+      this.component = shallowRef(
+        defineAsyncComponent(
+          () => import(`@/components/panels/Entities/${type}`)
+        )
       )
     }
   },
diff --git a/platypush/backend/http/webapp/src/components/widgets/Plugin/Index.vue b/platypush/backend/http/webapp/src/components/widgets/Plugin/Index.vue
index 0c0cba66..1a33ef8e 100644
--- a/platypush/backend/http/webapp/src/components/widgets/Plugin/Index.vue
+++ b/platypush/backend/http/webapp/src/components/widgets/Plugin/Index.vue
@@ -8,7 +8,7 @@
 <script>
 import Utils from "@/Utils";
 import Loading from "@/components/Loading";
-import {defineAsyncComponent} from "vue";
+import { defineAsyncComponent, shallowRef } from "vue";
 
 export default {
   name: "Plugin",
@@ -41,7 +41,7 @@ export default {
       this.loading = true
 
       try {
-        this.component = defineAsyncComponent(() => import(`@/components/panels/${this.componentName}/Index`))
+        this.component = shallowRef(defineAsyncComponent(() => import(`@/components/panels/${this.componentName}/Index`)))
         this.$options.components[this.componentName] = this.component
         this.config = (await this.request('config.get_plugins'))?.[this.pluginName] || {}
       } finally {
diff --git a/platypush/backend/http/webapp/src/views/Dashboard.vue b/platypush/backend/http/webapp/src/views/Dashboard.vue
index 172b7ed3..6e74a713 100644
--- a/platypush/backend/http/webapp/src/views/Dashboard.vue
+++ b/platypush/backend/http/webapp/src/views/Dashboard.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, shallowRef } from 'vue'
 import Utils from '@/Utils'
 import Loading from "@/components/Loading";
 import Row from "@/components/widgets/Row";
@@ -67,8 +67,10 @@ export default {
           style: row.attributes.style?.nodeValue,
           class: row.attributes.class?.nodeValue,
           widgets: [...row.children].map((el) => {
-            const component = defineAsyncComponent(
+            const component = shallowRef(
+              defineAsyncComponent(
                 () => import(`@/components/widgets/${el.nodeName}/Index`)
+              )
             )
 
             const style = el.attributes.style?.nodeValue
diff --git a/platypush/backend/http/webapp/src/views/Panel.vue b/platypush/backend/http/webapp/src/views/Panel.vue
index 56a72e7f..5d4f8a73 100644
--- a/platypush/backend/http/webapp/src/views/Panel.vue
+++ b/platypush/backend/http/webapp/src/views/Panel.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import {defineAsyncComponent} from "vue";
+import { defineAsyncComponent, shallowRef } from "vue";
 import Utils from '@/Utils'
 import Loading from "@/components/Loading";
 import Nav from "@/components/Nav";
@@ -63,7 +63,7 @@ export default {
           return
         }
 
-        const component = defineAsyncComponent(async () => { return comp })
+        const component = shallowRef(defineAsyncComponent(async () => { return comp }))
         self.$options.components[name] = component
         self.components[name] = {
           component: component,
diff --git a/platypush/backend/http/webapp/src/views/Plugin.vue b/platypush/backend/http/webapp/src/views/Plugin.vue
index b6d28a8b..1bbe30ab 100644
--- a/platypush/backend/http/webapp/src/views/Plugin.vue
+++ b/platypush/backend/http/webapp/src/views/Plugin.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import {defineAsyncComponent} from "vue";
+import { defineAsyncComponent, shallowRef } from "vue";
 import Utils from '@/Utils'
 import Loading from "@/components/Loading";
 import Nav from "@/components/Nav";
@@ -56,8 +56,8 @@ export default {
         return
       }
 
-      this.component = defineAsyncComponent(async () => { return comp })
-      this.$options.components[name] = this.component
+      this.component = shallowRef(defineAsyncComponent(async () => { return comp }))
+      this.$options.components[componentName] = this.component
     },
 
     async initConfig() {