feat: cleaner suspense tags on components, closes #1529

vuejs · Nov 23, 2021 · 5c8d83b · 5c8d83b
1 parent ce30047
commit 5c8d83b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/packages/app-backend-vue3/src/components/tree.ts b/packages/app-backend-vue3/src/components/tree.ts
@@ -83,7 +83,7 @@ export class ComponentWalker {
     if (subTree.component) {
       !suspense ? list.push(subTree.component) : list.push({ ...subTree.component, suspense })
     } else if (subTree.suspense) {
-      const suspenseKey = !subTree.suspense.isInFallback ? 'default' : 'fallback'
+      const suspenseKey = !subTree.suspense.isInFallback ? 'suspense default' : 'suspense fallback'
       list.push(...this.getInternalInstanceChildren(subTree.suspense.activeBranch, { ...subTree.suspense, suspenseKey }))
     } else if (Array.isArray(subTree.children)) {
       subTree.children.forEach(childSubTree => {
@@ -188,22 +188,14 @@ export class ComponentWalker {
       treeNode.domOrder = [-1]
     }
 
-    if (instance.suspense) {
+    if (instance.suspense?.suspenseKey) {
       treeNode.tags.push({
-        label: 's',
-        backgroundColor: 0x7d7dd7,
+        label: instance.suspense.suspenseKey,
+        backgroundColor: 0xe492e4,
         textColor: 0xffffff,
-        tooltip: 'Suspense',
       })
-      if (instance.suspense.suspenseKey) {
-        treeNode.tags.push({
-          label: instance.suspense.suspenseKey,
-          backgroundColor: 0xe492e4,
-          textColor: 0xffffff,
-        })
-        // update instanceMap
-        this.mark(instance, true)
-      }
+      // update instanceMap
+      this.mark(instance, true)
     }
 
     return this.api.visitComponentTree(instance, treeNode, this.componentFilter.filter, this.ctx.currentAppRecord.options.app)

diff --git a/packages/shell-dev-vue3/src/SuspenseExample.vue b/packages/shell-dev-vue3/src/SuspenseExample.vue
@@ -1,17 +1,22 @@
 <template>
   <Suspense>
     <template #fallback>
-      Loading...
+      <Loading />
     </template>
     <AsyncSetup />
   </Suspense>
 </template>
 
 <script>
+import { h } from 'vue'
 import AsyncSetup from './AsyncSetup.vue'
+
 export default {
   components: {
     AsyncSetup,
+    Loading: {
+      render: () => 'Loading...',
+    },
   },
 }
 </script>