added cool loading animation for dynamic scrolling
All checks were successful
Run Integration Tests / test (push) Successful in 28s

This commit is contained in:
partisan 2025-04-23 13:18:12 +02:00
parent 30528d629b
commit 2929b7781a
53 changed files with 141 additions and 80 deletions

View file

@ -8,16 +8,24 @@ document.addEventListener("DOMContentLoaded", function() {
let searchType = templateData.getAttribute('data-type') || 'text'; // Default to 'text' if not provided
let loading = false;
let hasMoreResults = true;
const loadingIndicator = document.getElementById('message-bottom-left');
const loadingIndicator = document.getElementById('message-bottom-right');
let loadingTimeout;
function showLoadingMessage() {
loadingIndicator.classList.add('visible');
}
function hideLoadingMessage() {
loadingIndicator.classList.remove('visible');
}
function loadResults(newPage) {
if (loading || !hasMoreResults) return;
loading = true;
// Show loading indicator if taking more than 150ms
loadingTimeout = setTimeout(() => {
loadingIndicator.style.display = 'flex';
showLoadingMessage()
}, 150);
fetch(`/search?q=${encodeURIComponent(query)}&t=${encodeURIComponent(searchType)}&p=${newPage}`)
@ -29,7 +37,7 @@ document.addEventListener("DOMContentLoaded", function() {
})
.then(data => {
clearTimeout(loadingTimeout);
loadingIndicator.style.display = 'none';
hideLoadingMessage()
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
const newResultsHTML = doc.getElementById('results').innerHTML;
@ -55,7 +63,7 @@ document.addEventListener("DOMContentLoaded", function() {
})
.catch(error => {
clearTimeout(loadingTimeout);
loadingIndicator.style.display = 'none';
hideLoadingMessage()
console.error('Error loading results:', error);
hasMoreResults = false;
loading = false;