Laden der Avatare im StarterKit nur bei Consent

src/utils/recommendations-utils.js

@@ -1,5 +1,6 @@
 import { fetchProfile } from './profile-utils.js';
 import { extractHostname, getServerClass } from './instances.js';
+import { checkConsent } from '../components/consentManager.js';
 
 export function createRecommendationPopup(accounts, title, authors, description) {
     const template = document.getElementById('popup-template').content.cloneNode(true);
@@ -107,32 +108,41 @@ export function populateAuthorsContainer(authorsContainer, authors) {
         return;
     }
 
-    authorsContainer.innerHTML = ''; // Sicherstellen, dass der Container leer ist
+    authorsContainer.innerHTML = ''; // Container leeren
 
     if (authors && authors.length > 0) {
-        const authorsToShow = authors.slice(0, 2); // Maximal zwei Autoren
+        const authorsToShow = authors.slice(0, 2); // Maximal zwei Autoren anzeigen
         const additionalAuthorsCount = authors.length - authorsToShow.length;
 
         authorsToShow.forEach(author => {
             const authorLink = document.createElement('a');
             authorLink.href = author;
             authorLink.classList.add('account');
-            authorLink.target = '_blank'; // Damit die Links ein neues Fenster öffnen
+            authorLink.target = '_blank'; // Link öffnet neues Fenster
 
-            fetchProfile(author, { updateElement: authorLink }).then(() => {
-                const avatarImage = authorLink.querySelector('.account-avatar');
-                if (avatarImage) {
-                    authorLink.textContent = '';
-                    authorLink.appendChild(avatarImage);
+            // Consent prüfen
+            if (checkConsent()) {
+                // Consent erteilt - Profilbild laden
+                fetchProfile(author, { updateElement: authorLink }).then(() => {
+                    const avatarImage = authorLink.querySelector('.account-avatar');
+                    if (avatarImage) {
+                        authorLink.textContent = '';
+                        authorLink.appendChild(avatarImage);
 
-                    // Hinzufügen der server-class für den Avatar-Rahmen
-                    const hostname = extractHostname(author);
-                    const serverClass = getServerClass(hostname);
-                    if (serverClass) {
-                        avatarImage.classList.add(serverClass);
+                        // Server-Klasse für Avatar hinzufügen
+                        const hostname = extractHostname(author);
+                        const serverClass = getServerClass(hostname);
+                        if (serverClass) {
+                            avatarImage.classList.add(serverClass);
+                        }
                     }
-                }
-            });
+                });
+            } else {
+                // Kein Consent – Skeleton-Loader anzeigen
+                const skeletonAvatar = document.createElement('div');
+                skeletonAvatar.classList.add('skeleton', 'avatar-skeleton', 'account-avatar');
+                authorLink.appendChild(skeletonAvatar);
+            }
 
             authorsContainer.appendChild(authorLink);
         });

style/elements.css

@@ -19,4 +19,45 @@ button.close-popup:hover {
     background-color: rgb(255, 99, 71);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     transform: none;
+}
+
+/* Allgemeine Skeleton-Styling */
+.skeleton {
+    background-color: #e0e0e0;
+    border-radius: 4px;
+    animation: skeleton-loading 1.5s infinite;
+}
+
+@keyframes skeleton-loading {
+    0% {
+        background-color: #e0e0e0;
+    }
+    50% {
+        background-color: #f0f0f0;
+    }
+    100% {
+        background-color: #e0e0e0;
+    }
+}
+
+/* Avatar-Skeleton */
+.avatar-skeleton {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+/* Skeleton für Autor und Username */
+.skeleton-text {
+    height: 12px;
+    margin-bottom: 6px;
+}
+
+.skeleton-text-name {
+    width: 120px;
+}
+
+.skeleton-text-username {
+    width: 80px;
 }

style/postwall.css

@@ -183,48 +183,6 @@
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-/* Allgemeine Skeleton-Styling */
-.skeleton {
-    background-color: #e0e0e0;
-    border-radius: 4px;
-    animation: skeleton-loading 1.5s infinite;
-}
-
-@keyframes skeleton-loading {
-    0% {
-        background-color: #e0e0e0;
-    }
-    50% {
-        background-color: #f0f0f0;
-    }
-    100% {
-        background-color: #e0e0e0;
-    }
-}
-
-/* Avatar-Skeleton */
-.avatar-skeleton {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    margin-right: 10px;
-}
-
-/* Skeleton für Autor und Username */
-.skeleton-text {
-    height: 12px;
-    margin-bottom: 6px;
-}
-
-.skeleton-text-name {
-    width: 120px;
-}
-
-.skeleton-text-username {
-    width: 80px;
-}
-
-
 /* Responsives Verhalten */
 @media (max-width: 800px) {
     .post {