Replace timeout with async while loop to increase robustness

Author: kv9898

src/resources/formats/html/giscus/giscus.ejs

@@ -1,6 +1,40 @@
 <input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
 <input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
 <script>
+async function loadGiscusWhenReady() {
+  while (!document.body.classList.contains('quarto-light') && !document.body.classList.contains('quarto-dark')) {
+    await new Promise(resolve => setTimeout(resolve, 50));
+  }
+
+  // Function to get the theme based on body class
+  const getTheme = () => {
+    const baseTheme = document.getElementById('giscus-base-theme').value;
+    const altTheme = document.getElementById('giscus-alt-theme').value;
+    return document.body.classList.contains('quarto-dark') ? altTheme : baseTheme;
+  };
+
+  // Create the Giscus script and add it to the desired location
+  const script = document.createElement("script");
+  script.src = "https://giscus.app/client.js";
+  script.async = true;
+  script.dataset.repo = "<%- giscus.repo %>";
+  script.dataset.repoId = "<%- giscus['repo-id'] %>";
+  script.dataset.category = "<%- giscus.category %>";
+  script.dataset.categoryId = "<%- giscus['category-id'] %>";
+  script.dataset.mapping = "<%- giscus.mapping %>";
+  script.dataset.reactionsEnabled = "<%- giscus['reactions-enabled'] ? 1 : 0 %>";
+  script.dataset.emitMetadata = "0";
+  script.dataset.inputPosition = "<%- giscus['input-position'] %>";
+  script.dataset.theme = getTheme();
+  script.dataset.lang = "<%- giscus.language %>";
+  script.crossOrigin = "anonymous";
+
+  // Append the script to the desired div instead of at the end of the body
+  document.getElementById("quarto-content").appendChild(script);
+}
+
+// Call the async function to start the loop
+loadGiscusWhenReady();
 setTimeout(() => {
   var bodyClass = window.document.body.classList;
   const GetTheme = () => {