Commit 9d802d0

@@ -2,7 +2,12 @@
   import { asideConfig, commentConfig } from '@/config';
   import { loadScript } from '@/scripts/utils';
   import { CDN } from '@constants/cdn.mjs';
-  import { cleanCommentHtml, createCommentItem, getTemplate } from './utils.ts';
+  import {
+    cleanCommentHtml,
+    cleanPlaceholders,
+    createCommentItem,
+    getTemplate,
+  } from './utils.ts';
 
   const twikooConfig = commentConfig.twikoo!;
 
@@ -42,7 +47,7 @@
       })
     );
 
-    container.removeChild(template!);
+    cleanPlaceholders(container, template!);
   }
 
   document.addEventListener('astro:page-load', setup);

@@ -62,3 +62,11 @@ export function createCommentItem(
 
   container.appendChild(item);
 }
+
+export function cleanPlaceholders(container: HTMLUListElement, template: HTMLTemplateElement) {
+  template.remove();
+  const placeholders = container.querySelectorAll('.comment-placeholder');
+  placeholders.forEach((placeholder) => {
+    placeholder.remove();
+  });
+}

@@ -1,6 +1,11 @@
 <script>
   import { asideConfig, commentConfig } from '@/config';
-  import { cleanCommentHtml, createCommentItem, getTemplate } from './utils.ts';
+  import {
+    cleanCommentHtml,
+    cleanPlaceholders,
+    createCommentItem,
+    getTemplate,
+  } from './utils.ts';
 
   async function setup() {
     const walineConfig = commentConfig.waline!;
@@ -51,7 +56,7 @@
       })
     );
 
-    container.removeChild(template!);
+    cleanPlaceholders(container, template!);
   }
 
   document.addEventListener('astro:page-load', setup);

@@ -1,5 +1,5 @@
 ---
-import { commentConfig } from '@/config';
+import { asideConfig, commentConfig } from '@/config';
 import I18nKey from '@i18n/I18nKey';
 import { i18n } from '@i18n/translation';
 import TwikooRecentCommentScript from './recent-comments/Twikoo.astro';
@@ -23,6 +23,22 @@ import WalineRecentCommentScript from './recent-comments/Waline.astro';
           </div>
         </li>
       </template>
+      {
+        Array.from({ length: asideConfig.recentComment.count }).map(() => (
+          <li class="list-row comment-placeholder px-0">
+            <a class="avatar">
+              <div class="skeleton w-16 min-w-16 rounded-md" />
+            </a>
+            <div class="flex w-full flex-col justify-between">
+              <div class="flex flex-col gap-2">
+                <div class="skeleton h-4 w-full" />
+                <div class="skeleton h-4 w-[100%-2rem]" />
+              </div>
+              <div class="skeleton h-4 w-10" />
+            </div>
+          </li>
+        ))
+      }
     </ul>
   </div>
 </div>