chore: fixes

javascript/carousel.js

@@ -1,13 +1,35 @@
-// Duplicate buttons in Carousel
-document.addEventListener("DOMContentLoaded", function () {
-  const ORIGINAL_BUTTONS = document.querySelectorAll(
-    ".carousel-buttons > div > a"
-  );
-  const BUTTONS_CONTAINER = document.querySelector(".carousel-buttons > div");
+document.addEventListener("DOMContentLoaded", async () => {
+  const container = document.querySelector(".carousel-placeholder");
+  if (!container) return;
 
-  // Loop through original buttons and clone anchor elements
-  ORIGINAL_BUTTONS.forEach(function (button) {
-    const CLONED_BUTTON = button.cloneNode(true);
-    BUTTONS_CONTAINER.appendChild(CLONED_BUTTON);
-  });
+  try {
+    const res = await fetch("/carousel.html");
+    const html = await res.text();
+
+    // Inject HTML
+    container.innerHTML = html;
+
+    // Let the browser paint once before heavy DOM work
+    await new Promise(requestAnimationFrame);
+
+    const buttonsWrapper = container.querySelector(".carousel-buttons > div");
+    if (!buttonsWrapper) return;
+
+    // Prevent double-run
+    if (buttonsWrapper.dataset.cloned === "true") return;
+    buttonsWrapper.dataset.cloned = "true";
+
+    const originals = buttonsWrapper.querySelectorAll("a");
+
+    // Use DocumentFragment to avoid layout thrashing
+    const fragment = document.createDocumentFragment();
+
+    originals.forEach((btn) => {
+      fragment.appendChild(btn.cloneNode(true));
+    });
+
+    buttonsWrapper.appendChild(fragment);
+  } catch (err) {
+    console.error("Carousel load failed:", err);
+  }
 });