From ce66aed322a8cde8d74e1099e9431cf074b763d7 Mon Sep 17 00:00:00 2001
From: Lakshay Manchanda <lakshaymanchanda73@gmail.com>
Date: Tue, 1 Oct 2024 20:27:27 +0530
Subject: [PATCH] Fixed profile diff loading issue

---
 .../assets/default-profile.svg                |  4 ++
 profile-diff-details/script.js                |  4 +-
 profile-diffs/script.js                       | 50 +++++++++++++------
 3 files changed, 40 insertions(+), 18 deletions(-)
 create mode 100644 profile-diff-details/assets/default-profile.svg

diff --git a/profile-diff-details/assets/default-profile.svg b/profile-diff-details/assets/default-profile.svg
new file mode 100644
index 00000000..726ac6fc
--- /dev/null
+++ b/profile-diff-details/assets/default-profile.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#494c4e" d="M9 0a9 9 0 0 0-9 9 8.654 8.654 0 0 0 .05.92 9 9 0 0 0 17.9 0A8.654 8.654 0 0 0 18 9a9 9 0 0 0-9-9zm5.42 13.42c-.01 0-.06.08-.07.08a6.975 6.975 0 0 1-10.7 0c-.01 0-.06-.08-.07-.08a.512.512 0 0 1-.09-.27.522.522 0 0 1 .34-.48c.74-.25 1.45-.49 1.65-.54a.16.16 0 0 1 .03-.13.49.49 0 0 1 .43-.36l1.27-.1a2.077 2.077 0 0 0-.19-.79v-.01a2.814 2.814 0 0 0-.45-.78 3.83 3.83 0 0 1-.79-2.38A3.38 3.38 0 0 1 8.88 4h.24a3.38 3.38 0 0 1 3.1 3.58 3.83 3.83 0 0 1-.79 2.38 2.814 2.814 0 0 0-.45.78v.01a2.077 2.077 0 0 0-.19.79l1.27.1a.49.49 0 0 1 .43.36.16.16 0 0 1 .03.13c.2.05.91.29 1.65.54a.49.49 0 0 1 .25.75z"/>
+</svg>
\ No newline at end of file
diff --git a/profile-diff-details/script.js b/profile-diff-details/script.js
index fb1443d9..3e670715 100644
--- a/profile-diff-details/script.js
+++ b/profile-diff-details/script.js
@@ -122,7 +122,7 @@ async function setUser(profileDiff) {
     type: 'img',
     attributes: {
       class: 'user_image',
-      src: user.picture.url,
+      src: user.picture?.url || 'assets/default-profile.svg',
       height: '71px',
       width: '71px',
     },
@@ -135,7 +135,7 @@ async function setUser(profileDiff) {
       class: 'user_name',
     },
   });
-  username.innerHTML = `${user.first_name} ${user.last_name}`;
+  username.innerHTML = `${user.first_name || ''} ${user.last_name || ''}`;
   CONTAINER.appendChild(username);
 
   const expandControlContainer = createElement({
diff --git a/profile-diffs/script.js b/profile-diffs/script.js
index 513c5150..ff9d1650 100644
--- a/profile-diffs/script.js
+++ b/profile-diffs/script.js
@@ -133,9 +133,18 @@ async function populateProfileDiffs(query = {}, newLink) {
       });
     }
     profileDiffsElement.appendChild(profileDiffsListElement);
-    for (let data of allProfileDiffs) {
-      await createProfileDiffCard(data, profileDiffsListElement);
-    }
+
+    // Create all profile diff cards with shimmer effect
+    allProfileDiffs.forEach((data) => {
+      const card = createProfileDiffCard(data);
+      profileDiffsListElement.appendChild(card);
+    });
+
+    // Fetch user details and update cards
+    allProfileDiffs.forEach(async (data) => {
+      const user = await getUser(data.userId);
+      updateProfileDiffCard(data.id, user);
+    });
   } catch (error) {
     showToast({ type: 'error', message: 'Something went wrong!' });
   } finally {
@@ -177,7 +186,7 @@ function debounce(func, delay) {
   };
 }
 
-async function createProfileDiffCard(data, profileDiffCardList) {
+function createProfileDiffCard(data) {
   const time = data.timestamp;
   const fireBaseTime = new Date(
     time._seconds * 1000 + time._nanoseconds / 1000000,
@@ -195,7 +204,7 @@ async function createProfileDiffCard(data, profileDiffCardList) {
 
   const profileCard = createElement({
     type: 'div',
-    attributes: { class: 'profile-card' },
+    attributes: { class: 'profile-card', 'data-id': data.id },
   });
   if (filterStates.status === Status.PENDING) {
     profileCard.style.cursor = 'pointer';
@@ -203,7 +212,6 @@ async function createProfileDiffCard(data, profileDiffCardList) {
       window.location.href = `/profile-diff-details/?id=${data.id}`;
     });
   }
-  profileDiffCardList.appendChild(profileCard);
 
   const profileCardLeft = createElement({
     type: 'div',
@@ -251,19 +259,29 @@ async function createProfileDiffCard(data, profileDiffCardList) {
   profileCard.appendChild(profileCardLeft);
   profileCard.appendChild(profileCardRight);
 
-  const user = await getUser(data.userId);
-  profileCardLeft.classList.remove('shimmer');
+  return profileCard;
+}
+
+function updateProfileDiffCard(cardId, user) {
+  const card = document.querySelector(`.profile-card[data-id="${cardId}"]`);
+  if (!card) return;
+
+  const profileLeft = card.querySelector('.profile');
+  const profilePic = card.querySelector('.profile-pic');
+  const profileName = card.querySelector('.profile-name-shimmer');
+  const profileUsername = card.querySelector('.profile-username-shimmer');
 
-  profileCardPhoto.style.backgroundImage = `url(${user.picture?.url})`;
-  profileCardPhoto.style.backgroundSize = 'cover';
+  profileLeft.classList.remove('shimmer');
+  profilePic.style.backgroundImage = `url(${user.picture?.url})`;
+  profilePic.style.backgroundSize = 'cover';
 
-  profileCardName.classList.remove('profile-name-shimmer');
-  profileCardName.classList.add('profile-name');
-  profileCardName.textContent = `${user.first_name} ${user.last_name}`;
+  profileName.classList.remove('profile-name-shimmer');
+  profileName.classList.add('profile-name');
+  profileName.textContent = `${user.first_name} ${user.last_name}`;
 
-  profileCardUsername.classList.remove('profile-username-shimmer');
-  profileCardUsername.classList.add('profile-username');
-  profileCardUsername.textContent = `${user.username}`;
+  profileUsername.classList.remove('profile-username-shimmer');
+  profileUsername.classList.add('profile-username');
+  profileUsername.textContent = `${user.username}`;
 }
 
 const addIntersectionObserver = () => {