Laden der Profile optimiert

src/template/template.html

@@ -24,6 +24,7 @@
                 <button class="close-popup">×</button>
             </div>
             <div id="account-list" class="recommendation-popup-body"></div>
+            <div class="loading-spinner" id="loading-spinner"></div>
         </div>
     </div>
 </template>

src/utils/popup-utils.js

@@ -10,11 +10,32 @@ export function createRecommendationPopup(accounts, title) {
     closeButton.addEventListener('click', () => popup.remove());
 
     const body = popup.querySelector('.recommendation-popup-body');
+    const spinner = popup.querySelector('#loading-spinner'); // Spinner-Element
 
-    accounts.forEach(accountUrl => {
-        fetchProfile(accountUrl, { createCard: true })
-            .then(card => body.appendChild(card))
-            .catch(error => console.error(`Fehler beim Laden des Accounts: ${accountUrl}`, error));
+    // Spinner anzeigen
+    spinner.style.display = 'block';
+
+    // Lade Profile parallel und sortiere Ergebnisse
+    const fetchProfilesInOrder = async (accounts) => {
+        const cards = await Promise.all(
+            accounts.map(async (accountUrl) => {
+                try {
+                    return await fetchProfile(accountUrl, { createCard: true });
+                } catch (error) {
+                    console.error(`Fehler beim Laden des Accounts: ${accountUrl}`, error);
+                    return null;
+                }
+            })
+        );
+
+        return cards.filter(card => card !== null); // Fehlgeschlagene Profile entfernen
+    };
+
+    fetchProfilesInOrder(accounts).then(cards => {
+        // Spinner ausblenden, nachdem alle Karten geladen sind
+        spinner.style.display = 'none';
+
+        cards.forEach(card => body.appendChild(card)); // In der ursprünglichen Reihenfolge einfügen
     });
 
     popup.addEventListener('click', function (event) {

style.css

@@ -335,6 +335,22 @@ section {
     list-style-type: none;
 }
 
+.loading-spinner {
+    display: none; /* Standardmäßig versteckt */
+    width: 50px;
+    height: 50px;
+    border: 5px solid rgba(0, 0, 0, 0.1);
+    border-top: 5px solid #3498db; /* Farbe des Spinners */
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 20px auto; /* Zentriert im Container */
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 .account-card-link {
     text-decoration: none;
     color: inherit;