Fix Giscus load after navigation (#17042)

Signed-off-by: UltralyticsAssistant <web@ultralytics.com>
Co-authored-by: UltralyticsAssistant <web@ultralytics.com>

docs/overrides/javascript/giscus.js

@@ -1,5 +1,8 @@
 // Giscus functionality
 function loadGiscus() {
+  const giscusContainer = document.getElementById("giscus-container");
+  if (!giscusContainer || giscusContainer.querySelector("script")) return;
+
   const script = document.createElement("script");
   script.src = "https://giscus.app/client.js";
   script.setAttribute("data-repo", "ultralytics/ultralytics");
@@ -17,8 +20,6 @@ function loadGiscus() {
   script.setAttribute("crossorigin", "anonymous");
   script.setAttribute("async", "");
 
-  const giscusContainer = document.getElementById("giscus-container");
-  if (giscusContainer) {
   giscusContainer.appendChild(script);
 
   // Synchronize Giscus theme with palette
@@ -47,17 +48,33 @@ function loadGiscus() {
       }
     });
   }
+}
+
+// Use Intersection Observer to load Giscus when the container is visible
+function setupGiscusLoader() {
+  const giscusContainer = document.getElementById("giscus-container");
+
+  if (giscusContainer) {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          loadGiscus();
+          observer.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.1 }); // Trigger when 10% of the element is visible
+
+    observer.observe(giscusContainer);
   }
 }
 
-// MkDocs specific: Load Giscus when the page content is fully loaded
+// Hook into MkDocs' navigation system
-document.addEventListener("DOMContentLoaded", function () {
+if (typeof document$ !== "undefined") {
-  var observer = new MutationObserver(function (mutations) {
+  document$.subscribe(() => {
-    if (document.getElementById("giscus-container")) {
+    // This function is called on every page load/change
-      loadGiscus();
+    setupGiscusLoader();
-      observer.disconnect();
-    }
   });
-
+} else {
-  observer.observe(document.body, { childList: true, subtree: true });
+  console.warn("MkDocs document$ not found. Falling back to DOMContentLoaded.");
-});
+  document.addEventListener("DOMContentLoaded", setupGiscusLoader);
+}