From 63eb3ea7e08618bac0a02726196d17aa13ec0fd1 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 28 Nov 2025 20:05:58 -0300
Subject: [PATCH] docs: Customize view transition and other layout shift
improvements (#43763)
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
---
docs/theme/index.hbs | 6 ++++--
docs/theme/page-toc.js | 2 +-
docs/theme/plugins.js | 31 +++++++++++++------------------
3 files changed, 18 insertions(+), 21 deletions(-)
diff --git a/docs/theme/index.hbs b/docs/theme/index.hbs
index 1e89021218b516b1ad9dc5487a6dce0053f53230..98f64d41c3eb86dfb335ecf0964f434c50fad0bb 100644
--- a/docs/theme/index.hbs
+++ b/docs/theme/index.hbs
@@ -3,11 +3,13 @@
-
diff --git a/docs/theme/page-toc.js b/docs/theme/page-toc.js
index 5d1525025b8fbc6bbb00b21e22b446703e39ad9c..1ca6f621de9c34723e8ccd3be3d293a57f802d08 100644
--- a/docs/theme/page-toc.js
+++ b/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")];
diff --git a/docs/theme/plugins.js b/docs/theme/plugins.js
index 18dd8ef9b8e70c6a2c082409e209aeb2837144a7..af9665dae6357797034b7557190db36d3728b56f 100644
--- a/docs/theme/plugins.js
+++ b/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();
});