[6.x] Prevent the tree structure from flashing when disclosures open (#13462)

Co-authored-by: Jason Varga <[email protected]>

Author: JayGeorge

resources/css/components/page-tree.css

@@ -7,10 +7,13 @@
     }
     .tree-node {
         @apply dark:pb-0.25;
-        transition: opacity var(--starting-style-transition-duration);
-        transition-delay: calc(sibling-index() * var(--starting-style-sibling-delay));
-        @starting-style {
-            opacity: 0;
+        /* We only want to animate tree nodes on page load. We don't want to animate child nodes when toggling them open, less it looks glitchy and feels unresponsive. */
+        &:not(.page-tree--ready &) {
+            transition: opacity var(--starting-style-transition-duration);
+            transition-delay: calc(sibling-index() * var(--starting-style-sibling-delay));
+            @starting-style {
+                opacity: 0;
+            }
         }
     }
     .page-tree-branch {

resources/js/components/structures/PageTree.vue

@@ -18,7 +18,7 @@
                     </div>
                 </div>
             </ui-panel-header>
-            <div v-if="!loading" class="page-tree">
+            <div v-if="!loading" class="page-tree" :class="{ 'page-tree--ready': ready }">
                 <Draggable
                     ref="tree"
                     v-model="treeData"
@@ -127,6 +127,7 @@ export default {
             treeData: [],
             collapsedState: [],
             discardingChanges: false,
+            ready: false,
         };
     },
 
@@ -172,6 +173,10 @@ export default {
         });
     },
 
+    mounted() {
+        setTimeout(() => this.ready = true, 500); // arbitrary delay after initial transitions
+    },
+
     methods: {
         isRoot(stat) {
             if (!this.expectsRoot) {