From 8d1a85cc602e82682b53cd87ef6bfae33bc359e2 Mon Sep 17 00:00:00 2001
From: x <admin@f0ck.it>
Date: Sun, 25 Jan 2026 14:24:54 +0100
Subject: [PATCH] feat: Introduce custom emojis, pinned comments, and comment
 thread locking, and enhance comment loading UI with a skeleton display.

---
 public/s/js/comments.js | 39 +++++++++++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/public/s/js/comments.js b/public/s/js/comments.js
index 9df9553..b44ed50 100644
--- a/public/s/js/comments.js
+++ b/public/s/js/comments.js
@@ -55,11 +55,22 @@ class CommentSystem {
             return;
         }
 
-        // Initialize with opacity 0 for fade-in
+        // Render skeleton (Result: Layout visible immediately)
         if (!scrollToId) {
-            this.container.innerHTML = '';
-            this.container.style.opacity = '0';
-            this.container.style.transition = 'opacity 0.5s ease';
+            this.container.style.opacity = '1'; // Ensure container is visible
+            this.container.style.transition = ''; // Reset
+
+            // Assume defaults for skeleton
+            this.render([], this.user, false);
+
+            // Hide list initially for fade-in
+            const list = this.container.querySelector('.comments-list');
+            if (list) {
+                list.style.opacity = '0';
+                list.style.transition = 'opacity 0.5s ease';
+                // Add a spinner or just empty? User said "not see the loading comments"
+                // but "layout present". Empty list is fine.
+            }
         }
 
         try {
@@ -69,20 +80,28 @@ class CommentSystem {
             if (data.success) {
                 if (data.require_login) {
                     this.container.innerHTML = '';
-                    this.container.style.display = 'none'; // Ensure it takes no space
+                    this.container.style.display = 'none';
                     return;
                 }
 
                 this.isAdmin = data.is_admin || false;
                 this.isLocked = data.is_locked || false;
+
+                // Render real data
                 this.render(data.comments, data.user_id, data.is_subscribed);
 
-                // Trigger fade-in
-                requestAnimationFrame(() => {
-                    this.container.style.opacity = '1';
-                });
+                // Fade in the NEW list
+                const list = this.container.querySelector('.comments-list');
+                if (list) {
+                    list.style.opacity = '0'; // Start invisible
+                    list.style.transition = 'opacity 0.5s ease';
+
+                    // Trigger reflow
+                    requestAnimationFrame(() => {
+                        list.style.opacity = '1';
+                    });
+                }
 
-                // Priority: Explicit ID > Hash
                 if (scrollToId) {
                     this.scrollToComment(scrollToId);
                 } else if (window.location.hash && window.location.hash.startsWith('#c')) {