Loader

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

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