Loader

content/profile.php

@@ -81,12 +81,10 @@ $isEditMode = (isset($_GET["edit"]) && $_GET["edit"] === "1") || !empty($error);
 
             <br>
 
-            <form action="php/controller/deleteAccount-controller.php"
+            <form action="php/controller/deleteAccount-controller.php" method="POST">
-                  method="POST"
-                  class="confirm-delete-account">
-
                 <button type="submit"
-                        class="button">
+                        class="button"
+                        onclick="return confirm('Möchtest du deinen Account und alle deine Beiträge wirklich unwiderruflich löschen?');">
                     Account löschen
                 </button>
             </form>
@@ -156,16 +154,14 @@ $isEditMode = (isset($_GET["edit"]) && $_GET["edit"] === "1") || !empty($error);
                                 Bearbeiten
                             </a>
 
-                            <form action="php/controller/deleteArticle-controller.php"
+                            <form action="php/controller/deleteArticle-controller.php" method="POST">
-                                  method="POST"
-                                  class="confirm-delete-article">
-
                                 <input type="hidden"
                                        name="id"
                                        value="<?php echo htmlspecialchars($userArticle->getID()); ?>">
 
                                 <button type="submit"
-                                        class="button">
+                                        class="button"
+                                        onclick="return confirm('Möchtest du diesen Artikel wirklich löschen?');">
                                     Löschen
                                 </button>
                             </form>
@@ -176,9 +172,11 @@ $isEditMode = (isset($_GET["edit"]) && $_GET["edit"] === "1") || !empty($error);
 
                     <p>Du hast noch keine Beiträge erstellt.</p>
 
-                    <a href="index.php?pfad=createArticle" class="button">
+                    <button type="button"
+                            class="button"
+                            onclick="window.location.href='index.php?pfad=createArticle';">
                         Beitrag erstellen!
-                    </a>
+                    </button>
 
                 <?php endif; ?>
             </div>

content/search-results.php

@@ -124,9 +124,7 @@ $categories = [
             </div>
 
             <noscript>
-                <button type="submit" class="nav__search-button">
+                <button type="submit" class="nav__search-button">Filter anwenden</button>
-                    Filter anwenden
-                </button>
             </noscript>
         </form>
 
@@ -139,6 +137,17 @@ $categories = [
             <p class="s-res-meta"><span id="s-res-result-count"><?php echo $totalResultsCount; ?></span> Treffer für Ihre Suchanfrage "<?php echo htmlspecialchars($query); ?>"</p>
         </div>
 
+        <p
+                id="results-loading"
+                class="results-loading"
+                role="status"
+                aria-live="polite"
+                hidden
+        >
+            <span class="results-spinner" aria-hidden="true"></span>
+            Suchergebnisse werden geladen …
+        </p>
+
         <!-- Ergebnisliste -->
         <div class="s-res-list">
             <?php if (!empty($results)): ?>
@@ -195,34 +204,17 @@ $categories = [
             </div>
 
             <nav class="s-res-page-navigation" aria-label="Seitennavigation">
-
+                <!-- No-JS-Fallback: -->
                 <noscript>
-                    <?php echo renderNoJsPagination(
+                    <?php echo renderNoJsPagination($currentPage, $totalPages, $query, $currentSort, $currentCategory, $limit); ?>
-                            $currentPage,
-                            $totalPages,
-                            $query,
-                            $currentSort,
-                            $currentCategory,
-                            $limit
-                    ); ?>
                 </noscript>
 
-                <div id="js-page-navigation" style="display: none;">
+                <!-- JS-Version: wird per search-results.js befüllt/eingeblendet: -->
-                    <button type="button"
+                <div id="js-page-navigation" style="display:none;">
-                            class="s-res-page-btn"
+                    <button type="button" class="s-res-page-btn" id="prev-page-btn">«</button>
-                            id="prev-page-btn">
-                        «
-                    </button>
-
                     <span id="dynamic-page-numbers"></span>
-
+                    <button type="button" class="s-res-page-btn" id="next-page-btn">»</button>
-                    <button type="button"
-                            class="s-res-page-btn"
-                            id="next-page-btn">
-                        »
-                    </button>
                 </div>
-
             </nav>
 
         </div>

content/showArticle.php

@@ -237,7 +237,7 @@ if ($replyAuthor === null) {
 
                                 <form method="post"
                                       action="index.php?pfad=deleteComment"
-                                      class="delete-comment-form confirm-delete-comment">
+                                      class="delete-comment-form">
 
                                     <input type="hidden"
                                            name="comment_id"
@@ -252,7 +252,8 @@ if ($replyAuthor === null) {
                                            ); ?>">
 
                                     <button type="submit"
-                                            class="delete-comment-button">
+                                            class="delete-comment-button"
+                                            onclick="return confirm('Möchtest du diesen Kommentar wirklich löschen?');">
                                         Kommentar löschen
                                     </button>
                                 </form>
@@ -368,7 +369,7 @@ if ($replyAuthor === null) {
 
                                                 <form method="post"
                                                       action="index.php?pfad=deleteComment"
-                                                      class="delete-comment-form confirm-delete-comment">
+                                                      class="delete-comment-form">
 
                                                     <input type="hidden"
                                                            name="comment_id"
@@ -383,8 +384,9 @@ if ($replyAuthor === null) {
                                                            ); ?>">
 
                                                     <button type="submit"
-                                                            class="delete-comment-button">
+                                                            class="delete-comment-button"
-                                                        Antwort löschen
+                                                            onclick="return confirm('Möchtest du diesen Kommentar wirklich löschen?');">
+                                                        Kommentar löschen
                                                     </button>
                                                 </form>
 
@@ -455,6 +457,18 @@ if ($replyAuthor === null) {
                 <button type="submit" class="button">
                     Kommentar senden
                 </button>
+
+                <p
+                        id="comment-loading"
+                        class="comment-loading"
+                        role="status"
+                        aria-live="polite"
+                        hidden
+                >
+                    <span class="comment-spinner" aria-hidden="true"></span>
+                    Kommentar wird gesendet …
+                </p>
+
             </form>
         <?php else: ?>
             <div class="comment-login-hint">

content/showCategory.php

@@ -113,6 +113,17 @@ $resultCount = count($results);
             </p>
         </div>
 
+        <p
+                id="results-loading"
+                class="results-loading"
+                role="status"
+                aria-live="polite"
+                hidden
+        >
+            <span class="results-spinner" aria-hidden="true"></span>
+            Kategoriebeiträge werden geladen …
+        </p>
+
         <!-- Ergebnisliste -->
         <div class="s-res-list">
             <?php if (!empty($results)): ?>

css/main.css

@@ -226,3 +226,33 @@ h1 {
     text-decoration: none;
     box-sizing: border-box;
 }
+.comment-loading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.comment-loading[hidden] {
+    display: none;
+}
+
+.comment-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #cbd5e1;
+    border-top-color: #1f2937;
+    border-radius: 50%;
+    animation: comment-spinner-rotation 0.8s linear infinite;
+}
+
+@keyframes comment-spinner-rotation {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+#comment-form button[type="submit"]:disabled {
+    cursor: wait;
+    opacity: 0.65;
+}

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

index.php

@@ -24,10 +24,9 @@ include_once "php/controller/index-controller.php";
     <link rel="stylesheet" href="css/showCategory.css">
 
         <script src="js/comments.js" defer></script>
-        <script src="js/profile.js" defer></script>
         <script src="js/editor.js" async></script>
+        <script src="js/search-results.js" async></script>
         <script src="js/showCategory.js" async></script>
-        <script src="js/search.js" async></script>
 
 
     <title>EduForge</title>

js/comments.js

@@ -11,27 +11,19 @@ document.addEventListener("DOMContentLoaded", function () {
     const parentCommentInput = document.getElementById("parent-comment-id");
     const replyInfo = document.getElementById("reply-info");
 
-    /**
+    const submitButton = form
-     * Fragt vor dem Löschen eines Kommentars nach einer Bestätigung.
+        ? form.querySelector('button[type="submit"]')
-     *
+        : null;
-     * Der Listener funktioniert auch für Kommentare,
-     * die später per AJAX eingefügt werden.
-     */
-    document.addEventListener("submit", function (event) {
-        if (!event.target.classList.contains("delete-comment-form")) {
-            return;
-        }
 
-        const confirmed = confirm(
+    const loadingMessage = document.getElementById("comment-loading");
-            "Möchtest du diesen Kommentar wirklich löschen?"
-        );
 
-        if (!confirmed) {
+    if (
-            event.preventDefault();
+        !form
-        }
+        || !commentsList
-    });
+        || !commentContent
-
+        || !parentCommentInput
-    if (!form || !commentsList || !commentContent || !parentCommentInput) {
+        || !submitButton
+    ) {
         return;
     }
 
@@ -73,6 +65,23 @@ document.addEventListener("DOMContentLoaded", function () {
     form.addEventListener("submit", function (event) {
         event.preventDefault();
 
+        /*
+         * Verhindert einen erneuten Submit, während der vorherige
+         * Kommentar noch gespeichert wird.
+         */
+        if (submitButton.disabled) {
+            return;
+        }
+
+        const originalButtonText = submitButton.textContent;
+
+        submitButton.disabled = true;
+        submitButton.textContent = "Wird gesendet …";
+
+        if (loadingMessage) {
+            loadingMessage.hidden = false;
+        }
+
         const formData = new FormData(form);
         const parentCommentId = parentCommentInput.value;
 
@@ -172,6 +181,7 @@ document.addEventListener("DOMContentLoaded", function () {
             <button
                 type="submit"
                 class="delete-comment-button"
+                onclick="return confirm('Möchtest du diesen Kommentar wirklich löschen?');"
             >
                 Kommentar löschen
             </button>
@@ -249,6 +259,7 @@ document.addEventListener("DOMContentLoaded", function () {
             <button
                 type="submit"
                 class="delete-comment-button"
+                onclick="return confirm('Möchtest du diesen Kommentar wirklich löschen?');"
             >
                 Kommentar löschen
             </button>
@@ -287,6 +298,14 @@ document.addEventListener("DOMContentLoaded", function () {
             .catch(function (error) {
                 console.error(error);
                 alert("Kommentar konnte nicht gesendet werden.");
+            })
+            .finally(function () {
+                submitButton.disabled = false;
+                submitButton.textContent = originalButtonText;
+
+                if (loadingMessage) {
+                    loadingMessage.hidden = true;
+                }
             });
     });
 

js/profile.js

@@ -1,29 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
-
-    const deleteAccountForm = document.querySelector(".confirm-delete-account");
-
-    if (deleteAccountForm) {
-        deleteAccountForm.addEventListener("submit", function (event) {
-
-            if (!confirm("Möchtest du deinen Account und alle deine Beiträge wirklich unwiderruflich löschen?")) {
-                event.preventDefault();
-            }
-
-        });
-    }
-
-    const deleteArticleForms = document.querySelectorAll(".confirm-delete-article");
-
-    deleteArticleForms.forEach(function (form) {
-
-        form.addEventListener("submit", function (event) {
-
-            if (!confirm("Möchtest du diesen Artikel wirklich löschen?")) {
-                event.preventDefault();
-            }
-
-        });
-
-    });
-
-});

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.
+                 * Falls das Nachladen nicht funktioniert, bleibt die bereits
-                console.error('Suchergebnisse konnten nicht nachgeladen werden:', err);
+                 * 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.
+                 * Falls das Nachladen nicht funktioniert, bleibt die bereits
-                console.error('Kategorie-Beiträge konnten nicht nachgeladen werden:', err);
+                 * serverseitig ausgegebene Kategorieansicht sichtbar.
+                 */
+                console.error(
+                    'Kategorie-Beiträge konnten nicht nachgeladen werden:',
+                    err
+                );
+            })
+            .finally(function () {
+                if (loadingElement) {
+                    loadingElement.hidden = true;
+                }
             });
     }