Merge pull request #869 from Real-Dev-Squad/fix/profileDiffLoading

Fixed profile diff loading issue

Author: lakshayman

profile-diff-details/assets/default-profile.svg

@@ -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({

profile-diff-details/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,15 +204,14 @@ 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';
     profileCard.addEventListener('click', () => {
       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 = () => {