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

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Soek vir nuwe resultate..."
msgstr "Soek vir nuwe resultate"
msgid "previous"
msgstr "Vorige"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "تورنتات"
msgid "searching_for_new_results"
msgstr "جاري البحث عن نتائج جديدة..."
msgstr "جاري البحث عن نتائج جديدة"
msgid "previous"
msgstr "السابق"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Торэнты"
msgid "searching_for_new_results"
msgstr "Пошук новых вынікаў..."
msgstr "Пошук новых вынікаў"
msgid "previous"
msgstr "Папярэдняе"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Торенти"
msgid "searching_for_new_results"
msgstr "Търсят се нови резултати..."
msgstr "Търсят се нови резултати"
msgid "previous"
msgstr "Предишен"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Cercant nous resultats..."
msgstr "Cercant nous resultats"
msgid "previous"
msgstr "Anterior"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrenty"
msgid "searching_for_new_results"
msgstr "Hledám nové výsledky..."
msgstr "Hledám nové výsledky"
msgid "previous"
msgstr "Předchozí"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrenter"
msgid "searching_for_new_results"
msgstr "Søger efter nye resultater..."
msgstr "Søger efter nye resultater"
msgid "previous"
msgstr "Forrige"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Suche nach neuen Ergebnissen..."
msgstr "Suche nach neuen Ergebnissen"
msgid "previous"
msgstr "Vorherige"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Αναζήτηση νέων αποτελεσμάτων..."
msgstr "Αναζήτηση νέων αποτελεσμάτων"
msgid "previous"
msgstr "Προηγούμενο"

View file

@ -110,7 +110,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Searching for new results..."
msgstr "Searching for new results"
msgid "previous"
msgstr "Previous"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torentoj"
msgid "searching_for_new_results"
msgstr "Serĉante novajn rezultojn..."
msgstr "Serĉante novajn rezultojn"
msgid "previous"
msgstr "Antaŭa"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Buscando nuevos resultados..."
msgstr "Buscando nuevos resultados"
msgid "previous"
msgstr "Anterior"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrendid"
msgid "searching_for_new_results"
msgstr "Otsitakse uusi tulemusi..."
msgstr "Otsitakse uusi tulemusi"
msgid "previous"
msgstr "Eelmine"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "تورنت‌ها"
msgid "searching_for_new_results"
msgstr "در حال جستجوی نتایج جدید..."
msgstr "در حال جستجوی نتایج جدید"
msgid "previous"
msgstr "قبلی"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrentit"
msgid "searching_for_new_results"
msgstr "Haetaan uusia tuloksia..."
msgstr "Haetaan uusia tuloksia"
msgid "previous"
msgstr "Edellinen"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Recherche de nouveaux résultats..."
msgstr "Recherche de nouveaux résultats"
msgid "previous"
msgstr "Précédent"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "टोरेंट्स"
msgid "searching_for_new_results"
msgstr "नए परिणामों की खोज कर रहे हैं..."
msgstr "नए परिणामों की खोज कर रहे हैं"
msgid "previous"
msgstr "पिछला"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrenti"
msgid "searching_for_new_results"
msgstr "Traže se novi rezultati..."
msgstr "Traže se novi rezultati"
msgid "previous"
msgstr "Prethodno"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Új találatok keresése..."
msgstr "Új találatok keresése"
msgid "previous"
msgstr "Előző"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Թորրենտներ"
msgid "searching_for_new_results"
msgstr "Նոր արդյունքներ որոնվում են..."
msgstr "Նոր արդյունքներ որոնվում են"
msgid "previous"
msgstr "Նախորդը"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrent"
msgid "searching_for_new_results"
msgstr "Mencari hasil baru..."
msgstr "Mencari hasil baru"
msgid "previous"
msgstr "Sebelumnya"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrent"
msgid "searching_for_new_results"
msgstr "Ricerca di nuovi risultati..."
msgstr "Ricerca di nuovi risultati"
msgid "previous"
msgstr "Precedente"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "טורנטים"
msgid "searching_for_new_results"
msgstr "מחפש תוצאות חדשות..."
msgstr "מחפש תוצאות חדשות"
msgid "previous"
msgstr "הקודם"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "トレント"
msgid "searching_for_new_results"
msgstr "新しい結果を検索中..."
msgstr "新しい結果を検索中"
msgid "previous"
msgstr "前"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "토렌트"
msgid "searching_for_new_results"
msgstr "새로운 결과를 검색 중..."
msgstr "새로운 결과를 검색 중"
msgid "previous"
msgstr "이전"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrentai"
msgid "searching_for_new_results"
msgstr "Ieškoma naujų rezultatų..."
msgstr "Ieškoma naujų rezultatų"
msgid "previous"
msgstr "Ankstesnis"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torenti"
msgid "searching_for_new_results"
msgstr "Meklē jaunus rezultātus..."
msgstr "Meklē jaunus rezultātus"
msgid "previous"
msgstr "Iepriekšējais"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Nieuwe resultaten zoeken..."
msgstr "Nieuwe resultaten zoeken"
msgid "previous"
msgstr "Vorige"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrenter"
msgid "searching_for_new_results"
msgstr "Søker etter nye resultater..."
msgstr "Søker etter nye resultater"
msgid "previous"
msgstr "Forrige"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrenty"
msgid "searching_for_new_results"
msgstr "Wyszukiwanie nowych wyników..."
msgstr "Wyszukiwanie nowych wyników"
msgid "previous"
msgstr "Poprzednie"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Procurando por novos resultados..."
msgstr "Procurando por novos resultados"
msgid "previous"
msgstr "Anterior"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrenturi"
msgid "searching_for_new_results"
msgstr "Caut rezultate noi..."
msgstr "Caut rezultate noi"
msgid "previous"
msgstr "Anterior"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Торренты"
msgid "searching_for_new_results"
msgstr "Идёт поиск новых результатов..."
msgstr "Идёт поиск новых результатов"
msgid "previous"
msgstr "Предыдущий"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrenty"
msgid "searching_for_new_results"
msgstr "Hľadám nové výsledky..."
msgstr "Hľadám nové výsledky"
msgid "previous"
msgstr "Predchádzajúce"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrenti"
msgid "searching_for_new_results"
msgstr "Iskanje novih rezultatov..."
msgstr "Iskanje novih rezultatov"
msgid "previous"
msgstr "Prejšnje"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Торенти"
msgid "searching_for_new_results"
msgstr "Тражење нових резултата..."
msgstr "Тражење нових резултата"
msgid "previous"
msgstr "Претходно"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Söker efter nya resultat..."
msgstr "Söker efter nya resultat"
msgid "previous"
msgstr "Föregående"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torenti"
msgid "searching_for_new_results"
msgstr "Inatafuta matokeo mapya..."
msgstr "Inatafuta matokeo mapya"
msgid "previous"
msgstr "Ya awali"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "ทอร์เรนต์"
msgid "searching_for_new_results"
msgstr "กำลังค้นหาผลลัพธ์ใหม่..."
msgstr "กำลังค้นหาผลลัพธ์ใหม่"
msgid "previous"
msgstr "ก่อนหน้า"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Mga Torrents"
msgid "searching_for_new_results"
msgstr "Naghahanap ng mga bagong resulta..."
msgstr "Naghahanap ng mga bagong resulta"
msgid "previous"
msgstr "Nakaraan"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrentler"
msgid "searching_for_new_results"
msgstr "Yeni sonuçlar aranıyor..."
msgstr "Yeni sonuçlar aranıyor"
msgid "previous"
msgstr "Önceki"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Торренти"
msgid "searching_for_new_results"
msgstr "Шукаю нові результати..."
msgstr "Шукаю нові результати"
msgid "previous"
msgstr "Попередній"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "Torrents"
msgid "searching_for_new_results"
msgstr "Đang tìm kiếm kết quả mới..."
msgstr "Đang tìm kiếm kết quả mới"
msgid "previous"
msgstr "Trước"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "种子"
msgid "searching_for_new_results"
msgstr "正在搜索新结果..."
msgstr "正在搜索新结果"
msgid "previous"
msgstr "上一页"

View file

@ -107,7 +107,7 @@ msgid "torrents"
msgstr "種子"
msgid "searching_for_new_results"
msgstr "正在搜尋新結果..."
msgstr "正在搜尋新結果"
msgid "previous"
msgstr "上一頁"

View file

@ -0,0 +1,60 @@
.message-bottom-right {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
align-items: center;
justify-content: center;
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--search-bg);
color: var(--text-color);
padding: 10px;
border-radius: 5px;
z-index: 1000;
text-align: center;
flex-direction: column;
border: 1px solid var(--border);
box-shadow: 0 0 10px var(--box-shadow);
}
.message-bottom-right.visible {
opacity: 1;
pointer-events: auto;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
70% {
transform: translateY(-5px);
}
85% {
transform: translateY(0);
}
95% {
transform: translateY(-2px);
}
}
.dot {
display: inline-block;
animation: bounce 1.5s infinite;
}
.dot:nth-child(2) {
animation-delay: 0.1s;
}
.dot:nth-child(3) {
animation-delay: 0.2s;
}
.dot:nth-child(4) {
animation-delay: 0.3s;
}

View file

@ -1310,24 +1310,6 @@ p {
text-shadow: 1px 1px 2px var(--border) !important; /* Adjust text shadow */
}
.message-bottom-left {
display: none;
align-items: center;
justify-content: center;
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--search-bg);
color: var(--text-color);
padding: 10px;
border-radius: 5px;
z-index: 1000;
text-align: center;
flex-direction: column;
border: 1px solid var(--border);
box-shadow: 0 0 10px var(--box-shadow);
}
body, h1, p, a, input, button {
color: var(--text-color); /* Applies the text color based on theme */
background-color: var(--background-color); /* Applies the background color based on theme */

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;

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

View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/{{.Theme}}.css">
<link rel="stylesheet" href="/static/css/style-fonts.css">
<link rel="stylesheet" href="/static/css/style-loadingindicator.css">
<link rel="stylesheet" href="/static/css/style-menu.css">
<link rel="search" type="application/opensearchdescription+xml" title="{{ translate "site_name" }}" href="/opensearch.xml">
<!-- Icons -->
@ -157,8 +158,8 @@
<div class="no-results-found">{{ translate "no_more_results" }}</div>
{{end}}
</div>
<div class="message-bottom-left" id="message-bottom-left">
<span>{{ translate "searching_for_new_results" }}</span>
<div id="message-bottom-right" class="message-bottom-right">
<span id="loading-text">{{ translate "searching_for_new_results" }}</span><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>
</div>
<div class="prev-next prev-img" id="prev-next">
<form action="/search" method="get">

View file

@ -18,6 +18,7 @@
<link rel="stylesheet" href="/static/css/style-imageloading.css">
<link rel="stylesheet" href="/static/css/style-imageviewer.css">
<link rel="stylesheet" href="/static/css/style-fixedwidth.css">
<link rel="stylesheet" href="/static/css/style-loadingindicator.css">
<link rel="stylesheet" href="/static/css/style-menu.css">
<link rel="stylesheet" href="/static/css/{{.Theme}}.css">
<link rel="stylesheet" href="/static/css/style-fonts.css">
@ -240,8 +241,8 @@
<div class="no-results-found no-results-found-offset">{{ translate "no_more_results" }}</div>
{{ end }}
</div>
<div class="message-bottom-left" id="message-bottom-left">
<span>{{ translate "searching_for_new_results" }}</span>
<div id="message-bottom-right" class="message-bottom-right">
<span id="loading-text">{{ translate "searching_for_new_results" }}</span><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>
</div>
<div id="image-viewer-overlay" style="display: none;"></div>

View file

@ -11,6 +11,7 @@
<link rel="stylesheet" href="/static/css/{{.Theme}}.css">
<link rel="stylesheet" href="/static/css/style-fonts.css">
<link rel="stylesheet" href="/static/css/style-music.css">
<link rel="stylesheet" href="/static/css/style-loadingindicator.css">
<link rel="stylesheet" href="/static/css/style-menu.css">
<link rel="search" type="application/opensearchdescription+xml" title="{{ translate "site_name" }}" href="/opensearch.xml">
<!-- Icons -->
@ -157,8 +158,8 @@
<div class="no-results-found">{{ translate "no_more_results" }}</div>
{{end}}
</div>
<div class="message-bottom-left" id="message-bottom-left">
<span>{{ translate "searching_for_new_results" }}</span>
<div id="message-bottom-right" class="message-bottom-right">
<span id="loading-text">{{ translate "searching_for_new_results" }}</span><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>
</div>
<div class="prev-next prev-img" id="prev-next">
<form action="/music" method="get">

View file

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/{{.Theme}}.css">
<link rel="stylesheet" href="/static/css/style-fonts.css">
<link rel="stylesheet" href="/static/css/style-loadingindicator.css">
<link rel="stylesheet" href="/static/css/style-menu.css">
<link rel="search" type="application/opensearchdescription+xml" title="{{ translate "site_name" }}" href="/opensearch.xml">
<!-- Icons -->
@ -158,8 +159,8 @@
<div class="no-results-found">{{ translate "no_more_results" }}</div>
{{end}}
</div>
<div class="message-bottom-left" id="message-bottom-left">
<span>{{ translate "searching_for_new_results" }}</span>
<div id="message-bottom-right" class="message-bottom-right">
<span id="loading-text">{{ translate "searching_for_new_results" }}</span><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>
</div>
<div class="prev-next prev-img" id="prev-next">
<form action="/search" method="get">