Loader

content/search-results.php

@@ -137,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)): ?>

content/showArticle.php

@@ -5,30 +5,6 @@ $repliesByParent = [];
 $articleObj = null;
 
 include_once 'php/controller/showArticle-controller.php';
-require_once 'php/model/UserManager.php';
-
-$userManager = UserManager::getInstance();
-
-/**
- * Liefert den vollständigen Namen zu einer gespeicherten E-Mail-Adresse.
- * Falls kein Benutzer gefunden wird, wird die E-Mail als Ersatz angezeigt.
- */
-function getCommentAuthorName($email, $userManager)
-{
-    $email = trim($email);
-    $user = $userManager->findUser($email);
-
-    if ($user === null) {
-        return $email;
-    }
-
-    $vorname = trim($user["vorname"] ?? "");
-    $nachname = trim($user["nachname"] ?? "");
-
-    $fullName = trim($vorname . " " . $nachname);
-
-    return $fullName !== "" ? $fullName : $email;
-}
 /*
  * Ermittelt, ob ohne JavaScript auf einen Kommentar
  * geantwortet werden soll.
@@ -197,14 +173,7 @@ if ($replyAuthor === null) {
 
                             <p>
                                 <strong>
-                                    <?php
+                                    <?php echo htmlspecialchars($comment->getAuthor()); ?>
-                                    echo htmlspecialchars(
-                                            getCommentAuthorName(
-                                                    $comment->getAuthor(),
-                                                    $userManager
-                                            )
-                                    );
-                                    ?>
                                 </strong>
 
                                 <span>
@@ -335,14 +304,7 @@ if ($replyAuthor === null) {
 
                                             <p>
                                                 <strong>
-                                                    <?php
+                                                    <?php echo htmlspecialchars($reply->getAuthor()); ?>
-                                                    echo htmlspecialchars(
-                                                            getCommentAuthorName(
-                                                                    $reply->getAuthor(),
-                                                                    $userManager
-                                                            )
-                                                    );
-                                                    ?>
                                                 </strong>
 
                                                 <span>
@@ -495,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

@@ -154,32 +154,21 @@ h1 {
 
 .button {
     width: 100%;
-    padding: 14px;
+    padding: 12px;
     background-color: #2563eb;
     color: white;
-    border: 2px solid transparent;
+    border: none;
     border-radius: 8px;
     font-size: 1rem;
     font-weight: bold;
     cursor: pointer;
-    transition:
+    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
-            background-color 0.2s ease,
-            transform 0.2s ease,
-            box-shadow 0.2s ease,
-            border-color 0.2s ease;
 }
 
 .button:hover {
-    background-color: #1e40af;
-    border-color: #93c5fd;
-    transform: translateY(-3px) scale(1.01);
-    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
-}
-
-.button:active {
     background-color: #1d4ed8;
-    transform: translateY(1px) scale(0.99);
+    transform: translateY(-2px);
-    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
 }
 
 .register-link {
@@ -237,181 +226,33 @@ h1 {
     text-decoration: none;
     box-sizing: border-box;
 }
-
+.comment-loading {
-/* Deutlichere Klickreaktion für Kategorien */
-.category-link:active {
-    transform: translateY(1px);
-    box-shadow: none;
-}
-
-/* Sichtbare Tastatur-Markierung */
-.button:focus-visible,
-.category-link:focus-visible,
-.article-link a:focus-visible,
-.register-link a:focus-visible {
-    outline: 3px solid #fbbf24;
-    outline-offset: 3px;
-}
-/* Kommentarbereich */
-
-#comments-list {
     display: flex;
-    flex-direction: column;
+    align-items: center;
-    gap: 20px;
+    gap: 8px;
-    margin-bottom: 40px;
+    margin-top: 10px;
 }
 
-#comments-list > div,
+.comment-loading[hidden] {
-.comment {
-    background-color: #ffffff;
-    border: 1px solid #dbe3ec;
-    border-radius: 12px;
-    padding: 24px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
-    transition:
-            transform 0.2s ease,
-            box-shadow 0.2s ease,
-            border-color 0.2s ease;
-}
-
-#comments-list > div:hover,
-.comment:hover {
-    transform: translateY(-3px);
-    border-color: #93c5fd;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
-}
-
-#comments-list textarea,
-#comment-content {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 14px;
-    border: 1px solid #cbd5e1;
-    border-radius: 8px;
-    font-size: 1rem;
-    resize: vertical;
-    transition:
-            border-color 0.2s ease,
-            box-shadow 0.2s ease;
-}
-
-#comments-list textarea:focus,
-#comment-content:focus {
-    outline: none;
-    border-color: #2563eb;
-    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
-}
-
-#comments-list a {
-    color: #2563eb;
-    font-weight: bold;
-    text-decoration: none;
-    border-radius: 4px;
-    transition:
-            color 0.2s ease,
-            background-color 0.2s ease;
-}
-
-#comments-list a:hover {
-    color: #1e40af;
-    background-color: #dbeafe;
-    text-decoration: underline;
-}
-
-#comments-list button {
-    cursor: pointer;
-}
-.delete-comment-button {
-     display: inline-block;
-     background: #ffffff;
-     color: #dc2626;
-     border: 2px solid #dc2626;
-     border-radius: 8px;
-     padding: 10px 18px;
-     font-size: 0.95rem;
-     font-weight: 600;
-     cursor: pointer;
-     transition:
-             background-color 0.25s ease,
-             color 0.25s ease,
-             transform 0.2s ease,
-             box-shadow 0.2s ease;
- }
-
-.delete-comment-button:hover {
-    background: #dc2626;
-    color: #ffffff;
-    transform: translateY(-2px);
-    box-shadow: 0 6px 14px rgba(220,38,38,0.25);
-}
-
-.delete-comment-button:active {
-    transform: translateY(1px);
-    box-shadow: none;
-}
-.delete-comment-form {
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
-/* Button zum Öffnen der Kommentarbearbeitung */
-.edit-comment-button {
-    display: inline-block;
-    width: auto;
-    padding: 10px 18px;
-    background-color: #2563eb;
-    color: #ffffff;
-    border: 2px solid #2563eb;
-    border-radius: 8px;
-    font-size: 0.95rem;
-    font-weight: 600;
-    cursor: pointer;
-    list-style: none;
-    transition:
-            background-color 0.2s ease,
-            border-color 0.2s ease,
-            transform 0.2s ease,
-            box-shadow 0.2s ease;
-}
-
-/* Entfernt das normale Dreieck in einigen Browsern */
-.edit-comment-button::-webkit-details-marker {
     display: none;
 }
 
-/* Eigenes Symbol vor dem Text */
+.comment-spinner {
-.edit-comment-button::before {
+    width: 16px;
-    content: "✏ ";
+    height: 16px;
+    border: 2px solid #cbd5e1;
+    border-top-color: #1f2937;
+    border-radius: 50%;
+    animation: comment-spinner-rotation 0.8s linear infinite;
 }
 
-.edit-comment-button:hover {
+@keyframes comment-spinner-rotation {
-    background-color: #1e40af;
+    to {
-    border-color: #1e40af;
+        transform: rotate(360deg);
-    transform: translateY(-2px);
+    }
-    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.3);
 }
 
-.edit-comment-button:active {
+#comment-form button[type="submit"]:disabled {
-    transform: translateY(1px);
+    cursor: wait;
-    box-shadow: none;
+    opacity: 0.65;
-}
-
-.edit-comment-button:focus-visible {
-    outline: 3px solid #fbbf24;
-    outline-offset: 3px;
-}
-
-/* Abstand zwischen Bearbeiten und Löschen */
-.edit-comment-details {
-    margin-bottom: 12px;
-}
-
-/* Geöffneter Bearbeitungsbereich */
-.edit-comment-details[open] .edit-comment-button {
-    margin-bottom: 12px;
-    background-color: #1e40af;
-}
-
-/* Geändertes Symbol, wenn der Bereich geöffnet ist */
-.edit-comment-details[open] .edit-comment-button::before {
-    content: "▲ ";
 }

css/navbar.css

@@ -248,9 +248,9 @@ CSS für die navbar
         z-index: 1000;
         transition: left 0.3s ease;
         padding: 2rem 1rem;
-        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
+        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
         overflow-y: auto;
-
+        
         /* Genug Abstand oben rechts, damit Links nicht hinter dem X liegen */
         padding: 4rem 1.5rem 2rem 1.5rem;
     }
@@ -302,89 +302,5 @@ CSS für die navbar
         padding: 0.8rem 1rem;
         cursor: pointer;
     }
-}
-    /* Deutlichere Hover-Effekte für die Navigation */
 
-    .nav__dropdown-toggle,
+}
-    .nav__link {
-        border-radius: 6px;
-        transition:
-                background-color 0.2s ease,
-                color 0.2s ease,
-                transform 0.2s ease;
-    }
-
-    .nav__dropdown-toggle:hover,
-    .nav__link:hover {
-        background-color: #ffffff;
-        color: #1d4ed8;
-        transform: translateY(-2px);
-    }
-
-    /* Sichtbare Reaktion beim Anklicken */
-    .nav__dropdown-toggle:active,
-    .nav__link:active {
-        transform: translateY(1px);
-    }
-
-    /* Deutlichere Effekte für Anmelden, Registrieren usw. */
-    .nav__button {
-        transition:
-                background-color 0.2s ease,
-                color 0.2s ease,
-                transform 0.2s ease,
-                box-shadow 0.2s ease;
-    }
-
-    .nav__button:hover {
-        background-color: #2563eb;
-        color: #ffffff;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-    }
-
-    .nav__button:active {
-        transform: translateY(1px);
-        box-shadow: none;
-    }
-
-    /* Deutlichere Hervorhebung der Einträge im Dropdown-Menü */
-    .nav__dropdown-menu a {
-        display: block;
-        transition:
-                background-color 0.2s ease,
-                color 0.2s ease,
-                padding-left 0.2s ease;
-    }
-
-    .nav__dropdown-menu a:hover {
-        background-color: #dbeafe;
-        color: #1d4ed8;
-        padding-left: 1.4rem;
-    }
-
-    /* Effekt für den Suchbutton */
-    .nav__search-button {
-        transition:
-                background-color 0.2s ease,
-                color 0.2s ease,
-                transform 0.2s ease;
-    }
-
-    .nav__search-button:hover {
-        background-color: #2563eb;
-        color: #ffffff;
-    }
-
-    .nav__search-button:active {
-        transform: scale(0.95);
-    }
-
-    /* Sichtbare Markierung bei Tastaturbedienung */
-    .nav a:focus-visible,
-    .nav button:focus-visible,
-    .nav input:focus-visible,
-    .nav label:focus-visible {
-        outline: 3px solid #fbbf24;
-        outline-offset: 3px;
-    }

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

js/comments.js

@@ -11,7 +11,19 @@ document.addEventListener("DOMContentLoaded", function () {
     const parentCommentInput = document.getElementById("parent-comment-id");
     const replyInfo = document.getElementById("reply-info");
 
-    if (!form || !commentsList || !commentContent || !parentCommentInput) {
+    const submitButton = form
+        ? form.querySelector('button[type="submit"]')
+        : null;
+
+    const loadingMessage = document.getElementById("comment-loading");
+
+    if (
+        !form
+        || !commentsList
+        || !commentContent
+        || !parentCommentInput
+        || !submitButton
+    ) {
         return;
     }
 
@@ -53,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;
 
@@ -269,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/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;
+                }
             });
     }
 

php/ajax/add-comment.php

@@ -4,7 +4,6 @@ if (session_status() === PHP_SESSION_NONE) {
 }
 
 require_once "../model/CommentManager.php";
-require_once "../model/UserManager.php";
 
 /**
  * Prüft, ob die Anfrage durch JavaScript per AJAX gesendet wurde.
@@ -41,6 +40,7 @@ function sendCommentResponse(
                 $additionalData
             )
         );
+
         exit();
     }
 
@@ -162,29 +162,13 @@ try {
         $parentCommentId
     );
 
-    $userManager = UserManager::getInstance();
-    $user = $userManager->findUser($_SESSION["user_email"]);
-
-    $authorName = $_SESSION["user_email"];
-
-    if ($user !== null) {
-        $vorname = trim($user["vorname"] ?? "");
-        $nachname = trim($user["nachname"] ?? "");
-
-        $fullName = trim($vorname . " " . $nachname);
-
-        if ($fullName !== "") {
-            $authorName = $fullName;
-        }
-    }
-
     sendCommentResponse(
         true,
         "Der Kommentar wurde erfolgreich gespeichert.",
         $articleId,
         [
             "commentId" => $commentId,
-            "author" => $authorName,
+            "author" => $_SESSION["user_email"],
             "content" => $content,
             "created" => date("Y-m-d H:i:s"),
             "parentCommentId" => $parentCommentId