fix: improve handling for timeout and edge case

kimminss0 · Nov 1, 2024 · 9997221 · 9997221
1 parent 5d6875e
commit 9997221
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/js/comments.js b/js/comments.js
@@ -1,5 +1,6 @@
 const observer = new MutationObserver(handleMutations);
 const commentsContainer = document.querySelector(".comments");
+let loadingTimeout = 0;
 
 if (commentsContainer) {
   observer.observe(commentsContainer, {
@@ -22,17 +23,20 @@ function handleMutations(mutations) {
 function handleChildListMutation(mutation) {
   mutation.addedNodes.forEach((node) => {
     if (node instanceof HTMLElement && node.classList.contains("utterances")) {
-      attachLoadingIndicator(node);
+      attachLoadingIndicator(node.parentElement);
     }
   });
 }
 
-function attachLoadingIndicator(node) {
+function attachLoadingIndicator(parent) {
+  if (parent.querySelector(".comments-loading")) {
+    return;
+  }
   const loading = document.createElement("div");
   loading.className = "comments-loading";
   loading.innerHTML = "<span>댓글을 로딩중입니다...</span>";
-  node.parentElement.appendChild(loading);
-  setTimeout(() => {
+  parent.appendChild(loading);
+  loadingTimeout = setTimeout(() => {
     loading.innerHTML =
       "<span>문제가 발생했습니다. 페이지를 새로고침 해주세요.</span>";
   }, 1000 * 15);
@@ -53,6 +57,7 @@ function removeLoadingIndicator(target) {
   const loadingIndicator =
     target.parentElement.querySelector(".comments-loading");
   if (loadingIndicator) {
+    clearTimeout(loadingTimeout);
     loadingIndicator.remove();
   }
 }