docs: Customize view transition and other layout shift improvements (#43763)

Danilo Leal created 

Follow up to https://github.com/zed-industries/zed/pull/43762.

Yet another shot at making the navigation between pages flicker less.

Release Notes:

- N/A

Change summary

docs/theme/index.hbs   |  6 ++++--
docs/theme/page-toc.js |  2 +-
docs/theme/plugins.js  | 31 +++++++++++++------------------
3 files changed, 18 insertions(+), 21 deletions(-)

Detailed changes

docs/theme/index.hbs 🔗 

@@ -3,11 +3,13 @@
     <head>
         <!-- Book generated using mdBook -->
         <meta charset="UTF-8">
-        <meta name="view-transition" content="same-origin">
         <style>
+            @view-transition {
+                navigation: auto;
+            }
             ::view-transition-old(root),
             ::view-transition-new(root) {
-                animation-duration: 0.15s;
+                animation-duration: 0.05s;
             }
         </style>
         <!-- Theme initialization - must run before any CSS loads to prevent flicker -->

docs/theme/page-toc.js 🔗 

@@ -56,7 +56,7 @@ const updateFunction = () => {
   }
 };
 
-window.addEventListener("load", () => {
+document.addEventListener("DOMContentLoaded", () => {
   const pagetoc = getPagetoc();
   const headers = [...document.getElementsByClassName("header")];

docs/theme/plugins.js 🔗 

@@ -24,7 +24,8 @@ function detectOS() {
 var os = detectOS();
 console.log("Operating System:", os);
 
-(function updateKeybindings() {
+// Defer keybinding processing to avoid blocking initial render
+function updateKeybindings() {
   const os = detectOS();
   const isMac = os === "Mac" || os === "iOS";
 
@@ -34,19 +35,17 @@ console.log("Operating System:", os);
     element.classList.add("keybinding");
   }
 
-  function walkDOM(node) {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      if (node.tagName.toLowerCase() === "kbd") {
-        processKeybinding(node);
-      } else {
-        Array.from(node.children).forEach(walkDOM);
-      }
-    }
-  }
+  // Process all kbd elements at once (more efficient than walking entire DOM)
+  const kbdElements = document.querySelectorAll("kbd");
+  kbdElements.forEach(processKeybinding);
+}
 
-  // Start the process from the body
-  walkDOM(document.body);
-})();
+// Use requestIdleCallback if available, otherwise requestAnimationFrame
+if (typeof requestIdleCallback === "function") {
+  requestIdleCallback(updateKeybindings);
+} else {
+  requestAnimationFrame(updateKeybindings);
+}
 
 function darkModeToggle() {
   var html = document.documentElement;
@@ -59,11 +58,6 @@ function darkModeToggle() {
     html.setAttribute("data-color-scheme", theme);
     html.className = theme;
     localStorage.setItem("mdbook-theme", theme);
-
-    // Force a repaint to ensure the changes take effect in the client immediately
-    document.body.style.display = "none";
-    document.body.offsetHeight;
-    document.body.style.display = "";
   }
 
   themeToggleButton.addEventListener("click", function (event) {
@@ -226,6 +220,7 @@ const copyMarkdown = () => {
 
 // Initialize functionality when DOM is loaded
 document.addEventListener("DOMContentLoaded", () => {
+  darkModeToggle();
   copyMarkdown();
 });