Prevent flashing during navigation

assets/tree-sidebar.js

@@ -40,6 +40,7 @@
     }
   })()
   var activeRow = null
+  var live = false // set once the fetched tree is on screen
 
   function disabledRow(text) {
     var row = document.createElement("div")
@@ -169,15 +170,26 @@
   }
 
   function render() {
-    container.textContent = ""
+    // If the layout pre-painted a snapshot of the previous page's tree, keep it
+    // on screen and build the live tree off-DOM, swapping it in once ready —
+    // no "…" placeholder, no scroll jump.
     var listing = document.createElement("div")
-    container.appendChild(listing)
-    listing.appendChild(disabledRow("…"))
+    var hasSnapshot = container.firstChild !== null
+    if (!hasSnapshot) {
+      container.appendChild(listing)
+      listing.appendChild(disabledRow("…"))
+    }
 
     fetchFolder("/", activePath === "/" ? "" : activePath)
       .then(function (resp) {
         listing.textContent = ""
         renderInto(listing, "/", resp.entries)
+        if (hasSnapshot) {
+          var top = container.scrollTop
+          container.replaceChildren(listing)
+          container.scrollTop = top
+        }
+        live = true
         if (activeRow) {
           try {
             activeRow.scrollIntoView({ block: "nearest" })
@@ -185,17 +197,34 @@
         }
       })
       .catch(function () {
+        live = false
+        container.replaceChildren(listing)
         listing.textContent = ""
         var err = document.createElement("div")
         err.className = "tree-row"
         err.textContent = "(failed — tap to retry)"
         err.addEventListener("click", function () {
+          container.textContent = ""
           render()
         })
         listing.appendChild(err)
       })
   }
 
+  // Snapshot the tree (markup + scroll) on the way out so the next page's
+  // layout can paint it immediately. Skipped until the live tree has rendered,
+  // so a placeholder or error row never becomes the snapshot. The active
+  // highlight is left out; the next page marks its own row.
+  window.addEventListener("pagehide", function () {
+    if (!live) return
+    if (activeRow) activeRow.classList.remove("is-active")
+    var html = container.innerHTML
+    if (activeRow) activeRow.classList.add("is-active") // bfcache may restore this page
+    try {
+      sessionStorage.setItem("tree-snapshot", JSON.stringify({ html: html, top: container.scrollTop }))
+    } catch (e) {}
+  })
+
   function setupMenuItem() {
     var specials = document.querySelector(".actions-special")
     if (!specials) return