added cool loading animation for dynamic scrolling
All checks were successful
Run Integration Tests / test (push) Successful in 28s
All checks were successful
Run Integration Tests / test (push) Successful in 28s
This commit is contained in:
parent
30528d629b
commit
2929b7781a
53 changed files with 141 additions and 80 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue