diff --git a/content/search-results.php b/content/search-results.php index d9a6399..4a73059 100644 --- a/content/search-results.php +++ b/content/search-results.php @@ -137,6 +137,17 @@ $categories = [

Treffer für Ihre Suchanfrage ""

+ +
diff --git a/content/showCategory.php b/content/showCategory.php index 2f8a4a9..0ad05eb 100644 --- a/content/showCategory.php +++ b/content/showCategory.php @@ -113,6 +113,17 @@ $resultCount = count($results);

+ +
diff --git a/css/search-results.css b/css/search-results.css index a89817c..fbf630a 100644 --- a/css/search-results.css +++ b/css/search-results.css @@ -271,4 +271,33 @@ CSS für die Suchergebnis-Seite align-items: flex-start; } } +/* Ladeanzeige beim Nachladen von Such- und Kategorieergebnissen */ +.results-loading { + display: flex; + align-items: center; + gap: 8px; + margin: 15px 0; + color: #4a5568; + font-size: 0.95rem; +} + +.results-loading[hidden] { + display: none; +} + +.results-spinner { + width: 16px; + height: 16px; + flex-shrink: 0; + border: 2px solid #cbd5e1; + border-top-color: #3182ce; + border-radius: 50%; + animation: results-spinner-rotation 0.8s linear infinite; +} + +@keyframes results-spinner-rotation { + to { + transform: rotate(360deg); + } +} diff --git a/js/search-results.js b/js/search-results.js index 9461e39..4d12c06 100644 --- a/js/search-results.js +++ b/js/search-results.js @@ -25,6 +25,7 @@ let listContainer, sortRadios, categorySelect, limitSelect; let prevBtn, nextBtn, numbersContainer, jsNav, resultCountEl; + let loadingElement; function init() { listContainer = document.querySelector('.s-res-list'); @@ -38,23 +39,41 @@ numbersContainer = document.getElementById('dynamic-page-numbers'); jsNav = document.getElementById('js-page-navigation'); resultCountEl = document.getElementById('s-res-result-count'); + loadingElement = document.getElementById('results-loading'); const checkedRadio = document.querySelector('.sort-radio:checked'); state.sort = checkedRadio ? checkedRadio.value : 'alphabet'; state.category = categorySelect ? categorySelect.value : 'all'; state.itemsPerPage = limitSelect ? (parseInt(limitSelect.value, 10) || 10) : 10; + if (loadingElement) { + loadingElement.hidden = false; + } + fetchFullDataset() .then(function (data) { state.allItems = data.results || []; attachEvents(); render(); - if (jsNav) jsNav.style.display = 'flex'; + + if (jsNav) { + jsNav.style.display = 'flex'; + } }) .catch(function (err) { - // JSON-Endpoint nicht erreichbar: die serverseitig gerenderte - // (No-JS-)Ansicht bleibt sichtbar und funktioniert weiter. - console.error('Suchergebnisse konnten nicht nachgeladen werden:', err); + /* + * Falls das Nachladen nicht funktioniert, bleibt die bereits + * serverseitig ausgegebene Ergebnisliste sichtbar. + */ + console.error( + 'Suchergebnisse konnten nicht nachgeladen werden:', + err + ); + }) + .finally(function () { + if (loadingElement) { + loadingElement.hidden = true; + } }); } diff --git a/js/showCategory.js b/js/showCategory.js index 08b07ff..394a721 100644 --- a/js/showCategory.js +++ b/js/showCategory.js @@ -21,6 +21,7 @@ let listContainer, sortRadios, searchInput, limitSelect; let prevBtn, nextBtn, numbersContainer, jsNav, resultCountEl; + let loadingElement; let searchDebounceTimer; function init() { @@ -35,23 +36,41 @@ numbersContainer = document.getElementById('dynamic-page-numbers'); jsNav = document.getElementById('js-page-navigation'); resultCountEl = document.getElementById('s-res-result-count'); + loadingElement = document.getElementById('results-loading'); const checkedRadio = document.querySelector('.sort-radio:checked'); state.sort = checkedRadio ? checkedRadio.value : 'alphabet'; state.query = searchInput ? searchInput.value : ''; state.itemsPerPage = limitSelect ? (parseInt(limitSelect.value, 10) || 10) : 10; + if (loadingElement) { + loadingElement.hidden = false; + } + fetchFullDataset() .then(function (data) { state.allItems = data.results || []; attachEvents(); render(); - if (jsNav) jsNav.style.display = 'flex'; + + if (jsNav) { + jsNav.style.display = 'flex'; + } }) .catch(function (err) { - // JSON-Endpoint nicht erreichbar: die serverseitig gerenderte - // (No-JS-)Ansicht bleibt sichtbar und funktioniert weiter. - console.error('Kategorie-Beiträge konnten nicht nachgeladen werden:', err); + /* + * Falls das Nachladen nicht funktioniert, bleibt die bereits + * serverseitig ausgegebene Kategorieansicht sichtbar. + */ + console.error( + 'Kategorie-Beiträge konnten nicht nachgeladen werden:', + err + ); + }) + .finally(function () { + if (loadingElement) { + loadingElement.hidden = true; + } }); }