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

16
static/js/dynamicscrolling.js
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;

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;
});