Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

17
static/js/dynamicscrollingimages.js
View file

@ -37,8 +37,7 @@
// Rest of your existing code with minor additions
const imageStatusInterval = 500;
const scrollThreshold = 500;
const loadingIndicator = document.getElementById('message-bottom-left');
let loadingTimer;
const loadingIndicator = document.getElementById('message-bottom-right'); let loadingTimer;
let isFetching = false;
let page = parseInt(document.getElementById('template-data').getAttribute('data-page')) || 1;
let query = document.getElementById('template-data').getAttribute('data-query');
@ -49,6 +48,14 @@
let imageIds = [];
let imageStatusTimer;
function showLoadingMessage() {
loadingIndicator.classList.add('visible');
}
function hideLoadingMessage() {
loadingIndicator.classList.remove('visible');
}
function ensureScrollable() {
if (noMoreImages) return;
if (document.body.scrollHeight <= window.innerHeight) {
@ -59,7 +66,7 @@
function fetchNextPage() {
if (isFetching || noMoreImages) return;
loadingTimer = setTimeout(() => {
loadingIndicator.style.display = 'flex';
showLoadingMessage();
}, 150);
isFetching = true;
page += 1;
@ -68,7 +75,7 @@
.then(response => response.text())
.then(html => {
clearTimeout(loadingTimer);
loadingIndicator.style.display = 'none';
hideLoadingMessage();
let tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
@ -105,7 +112,7 @@
})
.catch(error => {
clearTimeout(loadingTimer);
loadingIndicator.style.display = 'none';
hideLoadingMessage();
console.error('Fetch error:', error);
isFetching = false;
});