From 048b150c88a972eb1ad4accd501b74d58ec2ebfc Mon Sep 17 00:00:00 2001
From: Thaum Rystra <stefanzermatten@gmail.com>
Date: Tue, 19 May 2020 01:28:29 +0200
Subject: [PATCH] Significantly improved performance of interacting with large
 library trees

---
 app/imports/ui/components/tree/TreeNode.vue | 33 ++++++++++++++-------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/imports/ui/components/tree/TreeNode.vue b/app/imports/ui/components/tree/TreeNode.vue
index 62f41ac1..3db9bfc0 100644
--- a/app/imports/ui/components/tree/TreeNode.vue
+++ b/app/imports/ui/components/tree/TreeNode.vue
@@ -46,16 +46,26 @@
         v-show="showExpanded"
         class="pl-3"
       >
-        <tree-node-list
-          :node="node"
-          :children="computedChildren"
-          :group="group"
-          :organize="organize"
-          :selected-node-id="selectedNodeId"
-          @reordered="e => $emit('reordered', e)"
-          @reorganized="e => $emit('reorganized', e)"
-          @selected="e => $emit('selected', e)"
-        />
+        <v-fade-transition leave-absolute>
+          <tree-node-list
+            v-if="showExpanded"
+            :node="node"
+            :children="computedChildren"
+            :group="group"
+            :organize="organize"
+            :selected-node-id="selectedNodeId"
+            @reordered="e => $emit('reordered', e)"
+            @reorganized="e => $emit('reorganized', e)"
+            @selected="e => $emit('selected', e)"
+          />
+          <div v-else>
+            <div
+              v-for="i in children.length"
+              :key="i"
+              class="dummy-node"
+            />
+          </div>
+        </v-fade-transition>
       </div>
     </v-expand-transition>
   </v-sheet>
@@ -156,4 +166,7 @@
 	.theme--light .tree-node-title:hover {
 		background: rgba(0,0,0,.04);
 	}
+  .dummy-node {
+    height: 40px;
+  }
 </style>