Ошибка JavaScript: индикатор загрузки отображается после того, как последний элемент уже загружен. ⇐ Javascript

[Anonymous]

Я создал приложение для ведения блога на Laravel 8, которое назвал «Brave CMS».
CMS поддерживает темы. Для одной из тем, использующей Boostrap 5, я добавил «бесконечную прокрутку» комментариев.
В представлении Blade (single.blade.php) у меня есть:

Код: Выделить всё

@if ($is_infinitescroll)







@endif

JavaScript:

Код: Выделить всё

document.addEventListener("DOMContentLoaded", () => {
const container = document.getElementById("comments_container");
if (!container || container.dataset.infinitescroll !== "1") return;

const articleId = container.dataset.articleId;
const loader = document.getElementById("comments_loader");
let page = 0;
let loading = false;
let moreComments = container.dataset.commentsPerPage > 0;

if (!moreComments && loader) loader.classList.add("d-none");
if (!moreComments) return;

const sentinel = document.createElement("div");
sentinel.id = "comments_sentinel";
container.after(sentinel);

const observer = new IntersectionObserver(entries => {
const entry = entries[0];
if (!entry.isIntersecting || loading || !moreComments) return;
loadMoreComments();
}, { threshold: 1 });

observer.observe(sentinel);

async function loadMoreComments() {
if (!moreComments) return;

loading = true;
if (loader) loader.classList.remove("d-none");
page++;

try {
const res = await fetch("/load_comments", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
"X-Requested-With": "XMLHttpRequest"
},
body: JSON.stringify({ article_id: articleId, page: page })
});

const data = await res.json();

if (data.html?.trim()) {
const temp = document.createElement("div");
temp.innerHTML = data.html;
Array.from(temp.children).forEach(comment => {
comment.classList.add("comment-batch-enter");
container.appendChild(comment);
comment.getBoundingClientRect();
comment.classList.add("comment-batch-enter-active");
});
}

moreComments = data.more_comments_to_display;

if (!moreComments) {
if (loader) loader.classList.add("d-none");
observer.disconnect();
sentinel.remove();
}

} catch (e) {
console.error("Infinite comments error:", e);
}

if (loader) loader.classList.add("d-none");
loading = false;
}
});

Проблема с приведенным выше кодом заключается в том, что элемент после загрузки последнего комментария нет больше комментариев для загрузки.
В чем моя ошибка?>

Подробнее здесь: https://stackoverflow.com/questions/798 ... aleady-loa