From d01fe0336403ebb299866689113492ba8ed330c1 Mon Sep 17 00:00:00 2001
From: Ethan Reed <etchre@outlook.com>
Date: Thu, 11 Jun 2026 00:57:05 -0700
Subject: [PATCH] Allow skipping the tree opening animation in expandTreeNode

Every link click does a full page reload, which rebuilds the navigation
tree and replays the tree opening animation.

Add a 'skipTreeAnimation' parameter (defaults to false) to
expandTreeNode. When this parameter is true, the tree opening animation
is skipped. The 'skipTreeAnimation' parameter is passed down to
expandTreeNode through showCurrent and fullExpand.

requestNaviReload (called by Navigation.reload) passes 'paths !== null'
into 'skipTreeAnimation'. When the tree state is being restored from
sessionStorage, 'paths !== null' resolves to true, which when passed
into Navigation.showCurrent causes the animation to be skipped.

Signed-off-by: Ethan Reed <etchre@outlook.com>
---
 resources/js/modules/navigation.ts | 32 +++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/resources/js/modules/navigation.ts b/resources/js/modules/navigation.ts
index 32c89aca9f..48c6543745 100644
--- a/resources/js/modules/navigation.ts
+++ b/resources/js/modules/navigation.ts
@@ -285,14 +285,20 @@ function traverseForPaths () {
  *
  * @param $expandElem expander
  * @param callback    callback function
+ * @param skipTreeAnimation skip tree opening animation when true
  */
-function expandTreeNode ($expandElem, callback = undefined): void {
+function expandTreeNode ($expandElem, callback = undefined, skipTreeAnimation = false): void {
     let $children = $expandElem.closest('li').children('div.list_container');
     const $icon = $expandElem.find('img');
     if ($expandElem.hasClass('loaded')) {
         if ($icon.is('.ic_b_plus')) {
             $icon.removeClass('ic_b_plus').addClass('ic_b_minus');
-            $children.slideDown('fast');
+            // check whether to show tree immediately or play animation
+            if (skipTreeAnimation) {
+                $children.show();
+            } else {
+                $children.slideDown('fast');
+            }
         }
 
         if (callback && typeof callback === 'function') {
@@ -314,7 +320,13 @@ function expandTreeNode ($expandElem, callback = undefined): void {
                 const $destination = $expandElem.closest('li');
                 $icon.removeClass('ic_b_plus').addClass('ic_b_minus');
                 $children = $destination.children('div.list_container');
-                $children.slideDown('fast');
+                // check whether to show tree immediately or play animation
+                if (skipTreeAnimation) {
+                    $children.show();
+                } else {
+                    $children.slideDown('fast');
+                }
+
                 if ($destination.find('ul > li').length === 1) {
                     $destination.find('ul > li')
                         .find('a.expander.container')
@@ -365,8 +377,10 @@ function scrollToView ($element, $forceToTop) {
 
 /**
  * Expand the navigation and highlight the current database or table/view
+ *
+ * @param {boolean} skipTreeAnimation skip tree opening animation when true (passed down into expandTreeNode from fullExpand)
  */
-function showCurrent (): void {
+function showCurrent (skipTreeAnimation = false): void {
     const db = CommonParams.get('db');
     const table = CommonParams.get('table');
 
@@ -402,7 +416,7 @@ function showCurrent (): void {
                 handleTableOrDb(table, $('#pma_navigation_tree_content'));
             }
         } else if ($dbItem) {
-            fullExpand(table, $dbItem);
+            fullExpand(table, $dbItem, skipTreeAnimation);
         }
     } else if ($('#navi_db_select').length && $('#navi_db_select').val()) {
         $('#navi_db_select').val('').hide().trigger('change');
@@ -423,12 +437,12 @@ function showCurrent (): void {
             $('#pma_navigation_tree').find('> div'), dbItemName, 'database', ! table
         );
 
-        fullExpand(table, $dbItem);
+        fullExpand(table, $dbItem, skipTreeAnimation);
     }
 
     Navigation.showFullName($('#pma_navigation_tree'));
 
-    function fullExpand (table, $dbItem) {
+    function fullExpand (table, $dbItem, skipTreeAnimation) {
         const $expander = $dbItem.children('div').first().children('a.expander');
         // if not loaded or loaded but collapsed
         if (! $expander.hasClass('loaded') ||
@@ -436,7 +450,7 @@ function showCurrent (): void {
         ) {
             Navigation.expandTreeNode($expander, function () {
                 handleTableOrDb(table, $dbItem);
-            });
+            }, skipTreeAnimation);
         } else {
             handleTableOrDb(table, $dbItem);
         }
@@ -655,7 +669,7 @@ function reload (callback = null, paths = null): void {
                 $('#pma_navigation_tree').html(data.message).children('div').show();
                 if ($('#pma_navigation_tree').hasClass('synced')) {
                     Navigation.selectCurrentDatabase();
-                    Navigation.showCurrent();
+                    Navigation.showCurrent(paths !== null); // skip tree opening animation when there is tree state in sessionStorage
                 }
 
                 // Fire the callback, if any