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.

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,9 +96,11 @@ export default {
           }
       )
 
-      this.component = defineAsyncComponent(
+      this.component = shallowRef(
+        defineAsyncComponent(
           () => import(`@/components/panels/Entities/${type}`)
         )
+      )
     }
   },
 }

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 {

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,9 +67,11 @@ 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
             const classes = el.attributes.class?.nodeValue

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,

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.component = shallowRef(defineAsyncComponent(async () => { return comp }))
-      this.$options.components[name] = this.component
+      this.$options.components[componentName] = this.component
     },
 
     async initConfig() {