feat: improve loading state in comment

dewanakl · Jan 8, 2025 · 94f9c9a · 94f9c9a
1 parent 04f5101
commit 94f9c9a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/js/comment/card.js b/js/comment/card.js
@@ -1,6 +1,5 @@
 import { util } from '../common/util.js';
 import { theme } from '../common/theme.js';
-import { pagination } from './pagination.js';
 import { storage } from '../common/storage.js';
 import { session } from '../common/session.js';
 
@@ -16,13 +15,7 @@ export const card = (() => {
     const maxCommentLength = 250;
 
     const renderLoading = () => {
-        const comments = document.getElementById('comments');
-        if (comments.getAttribute('data-loading') === 'true') {
-            return;
-        }
-
-        comments.setAttribute('data-loading', 'true');
-        comments.innerHTML = `
+        return `
         <div class="bg-theme-${theme.isDarkMode('dark', 'light')} shadow p-3 mx-0 mt-0 mb-3 rounded-4">
             <div class="d-flex flex-wrap justify-content-between align-items-center placeholder-wave">
                 <span class="placeholder bg-secondary col-5 rounded-3 my-1"></span>
@@ -34,7 +27,7 @@ export const card = (() => {
                 <span class="placeholder bg-secondary col-5 rounded-3"></span>
                 <span class="placeholder bg-secondary col-12 rounded-3 my-1"></span>
             </p>
-        </div>`.repeat(pagination.getPer());
+        </div>`;
     };
 
     const convertMarkdownToHTML = (input) => {

diff --git a/js/comment/comment.js b/js/comment/comment.js
@@ -349,9 +349,13 @@ export const comment = (() => {
     };
 
     const comment = () => {
-        card.renderLoading();
         const comments = document.getElementById('comments');
 
+        if (comments.getAttribute('data-loading') === 'false') {
+            comments.setAttribute('data-loading', 'true');
+            comments.innerHTML = card.renderLoading().repeat(pagination.getPer());
+        }
+
         return request(HTTP_GET, `/api/comment?per=${pagination.getPer()}&next=${pagination.getNext()}`)
             .token(session.getToken())
             .send()
@@ -380,8 +384,9 @@ export const comment = (() => {
 
                 showHide.set('hidden', traverse(res.data, showHide.get('hidden')));
                 comments.innerHTML = res.data.map((c) => card.renderContent(c)).join('');
-                res.data.forEach(addEventLike);
+
                 res.data.forEach(fetchTracker);
+                res.data.forEach(addEventLike);
 
                 return res;
             });