feat: Introduce custom emojis, pinned comments, and comment thread locking, and enhance comment loading UI with a skeleton display.
This commit is contained in:
@@ -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')) {
|
||||
|
||||
Reference in New Issue
Block a user