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 ""
+
+
+ Suchergebnisse werden geladen …
+
+
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);
+
+
+ Kategoriebeiträge werden geladen …
+
+
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;
+ }
});
}