feat: display loading element in comment section

css/default.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&display=swap");
 
 html {
   font-size: 62.5%;
@@ -34,7 +34,7 @@ footer {
 }
 
 h1 {
-  margin: 1.0rem 0;
+  margin: 1rem 0;
   font-size: 2.4rem;
 }
 
@@ -87,20 +87,17 @@ article .header {
 
 .logo a .gray {
   color: #888;
-
 }
 
 code {
   font-size: 95%;
-  font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
+  font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
   margin: 0;
   hyphens: manual;
 }
 pre {
   margin: 1em 0;
-  background-color: #f5f5f5;
   padding: 8px 15px;
-  border-radius: 5px;
   overflow: auto;
 }
 pre code {
@@ -115,6 +112,10 @@ pre code {
 div.sourceCode {
   border-radius: 5px;
 }
+pre:not(.sourceCode) {
+  background-color: #f5f5f5;
+  border-radius: 5px;
+}
 
 img {
   max-width: 100%;
@@ -197,6 +198,10 @@ hr {
   color: #555;
 }
 
+.comments {
+  min-height: 10em;
+}
+
 .header .date,
 .header .lastmod {
   white-space: nowrap;

js/comments.js

@@ -0,0 +1,58 @@
+const observer = new MutationObserver(handleMutations);
+const commentsContainer = document.querySelector(".comments");
+
+if (commentsContainer) {
+  observer.observe(commentsContainer, {
+    childList: true,
+    attributeFilter: ["style"],
+    subtree: true,
+  });
+}
+
+function handleMutations(mutations) {
+  mutations.forEach((mutation) => {
+    if (mutation.type === "childList") {
+      handleChildListMutation(mutation);
+    } else if (mutation.type === "attributes") {
+      handleAttributeMutation(mutation);
+    }
+  });
+}
+
+function handleChildListMutation(mutation) {
+  mutation.addedNodes.forEach((node) => {
+    if (node instanceof HTMLElement && node.classList.contains("utterances")) {
+      attachLoadingIndicator(node);
+    }
+  });
+}
+
+function attachLoadingIndicator(node) {
+  const loading = document.createElement("div");
+  loading.className = "comments-loading";
+  loading.innerHTML = "<span>댓글을 로딩중입니다...</span>";
+  node.parentElement.appendChild(loading);
+  setTimeout(() => {
+    loading.innerHTML =
+      "<span>문제가 발생했습니다. 페이지를 새로고침 해주세요.</span>";
+  }, 1000 * 15);
+}
+
+function handleAttributeMutation(mutation) {
+  const target = mutation.target;
+  if (
+    target instanceof HTMLElement &&
+    target.classList.contains("utterances")
+  ) {
+    removeLoadingIndicator(target);
+    observer.disconnect();
+  }
+}
+
+function removeLoadingIndicator(target) {
+  const loadingIndicator =
+    target.parentElement.querySelector(".comments-loading");
+  if (loadingIndicator) {
+    loadingIndicator.remove();
+  }
+}

templates/post.html

@@ -14,12 +14,7 @@
   <hr>
   <h2>댓글</h2>
   <noscript>댓글을 확인하려면 javascript를 허용해주세요.</noscript>
-  <script src="https://utteranc.es/client.js"
-          repo="kimminss0/minseo-kim.net"
-          issue-term="pathname"
-          label="utterances"
-          theme="github-light"
-          crossorigin="anonymous"
-          async>
-  </script>
+  <script src="/js/comments.js" async></script>
+  <script src="https://utteranc.es/client.js" repo="kimminss0/minseo-kim.net" issue-term="pathname" label="utterances"
+    theme="github-light" crossorigin="anonymous" async></script>
 </section>