From cdaa79cf80297b88a1296e0c270285ab2a808add Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 10 Dec 2020 19:49:43 +0800
Subject: [PATCH] Improve JS loading sequence

---
 _includes/head.html               |  2 +-
 _includes/js-selector.html        |  4 ++--
 _includes/mermaid.html            | 35 ++++++++++++++++---------------
 assets/js/_commons/back-to-top.js | 23 +++++++++++---------
 4 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 96c9454..00882df 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -61,7 +61,7 @@
 
   <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
 
-  <script async
+  <script defer
     src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
 
   {% include js-selector.html %}
diff --git a/_includes/js-selector.html b/_includes/js-selector.html
index a892e2a..b02e076 100644
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -18,8 +18,8 @@
 
 {% if page.math %}
   <!-- MathJax -->
-  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-  <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  <script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 {% endif %}
 
 {% if jekyll.environment == 'production' %}
diff --git a/_includes/mermaid.html b/_includes/mermaid.html
index 7c63656..6abef73 100644
--- a/_includes/mermaid.html
+++ b/_includes/mermaid.html
@@ -3,26 +3,27 @@
 -->
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 <script>
+  $(function() {
+    let initTheme = "default";
 
-  let initTheme = "default";
+    if ($("html[mode=dark]").length > 0
+      || ($("html[mode]").length == 0
+        && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
+      initTheme = "dark";
+    }
 
-  if ($("html[mode=dark]").length > 0
-    || ($("html[mode]").length == 0
-      && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
-    initTheme = "dark";
-  }
+    let mermaidConf = {
+      theme: initTheme  /* <default|dark|forest|neutral> */
+    };
 
-  let mermaidConf = {
-    theme: initTheme  /* <default|dark|forest|neutral> */
-  };
 
-  /* Markdown converts to HTML */
-  $("pre").has("code.language-mermaid").each(function() {
-    let svgCode = $(this).children().html();
-    $(this).addClass("unloaded");
-    $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+    /* Markdown converts to HTML */
+    $("pre").has("code.language-mermaid").each(function() {
+      let svgCode = $(this).children().html();
+      $(this).addClass("unloaded");
+      $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+    });
+
+    mermaid.initialize(mermaidConf);
   });
-
-  mermaid.initialize(mermaidConf);
-
 </script>
diff --git a/assets/js/_commons/back-to-top.js b/assets/js/_commons/back-to-top.js
index 07532ae..21a91da 100644
--- a/assets/js/_commons/back-to-top.js
+++ b/assets/js/_commons/back-to-top.js
@@ -1,18 +1,21 @@
 /*
 Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
 */
-$(window).scroll(function() {
-  if ($(this).scrollTop() > 50
-      && $("#sidebar-trigger").css("display") === "none") {
-    $("#back-to-top").fadeIn();
-  } else {
-    $("#back-to-top").fadeOut();
-  }
-});
 
 $(function() {
+  $(window).scroll(function() {
+    if ($(this).scrollTop() > 50 &&
+      $("#sidebar-trigger").css("display") === "none") {
+      $("#back-to-top").fadeIn();
+    } else {
+      $("#back-to-top").fadeOut();
+    }
+  });
+
   $("#back-to-top").click(function() {
-    $("body,html").animate({scrollTop: 0}, 800);
+    $("body,html").animate({
+      scrollTop: 0
+    }, 800);
     return false;
   });
-});
\ No newline at end of file
+});