From 4c0d04bc5c11aa5a0b47957146210c74a5ea7579 Mon Sep 17 00:00:00 2001
From: Dilan Kavishka <dkgamage01@gmail.com>
Date: Tue, 24 Sep 2024 13:29:14 +0530
Subject: [PATCH] Fixed Profile image Loading

---
 .../MenteeApplication.component.tsx            | 18 ++++++------------
 .../MentorApplication.component.tsx            | 18 ++++++------------
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/components/MenteeApplication/MenteeApplication.component.tsx b/src/components/MenteeApplication/MenteeApplication.component.tsx
index 865c4680..c543c0d7 100644
--- a/src/components/MenteeApplication/MenteeApplication.component.tsx
+++ b/src/components/MenteeApplication/MenteeApplication.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { getStateColor } from '../../utils';
-import UserIcon from '../../assets/svg/Icons/UserIcon';
+import ProfilePic from '../ProfilePic';
 import { useParams } from 'react-router-dom';
 import useMentee from '../../hooks/admin/useMentee';
 import Toast from '../Toast';
@@ -33,17 +33,11 @@ const MenteeApplication: React.FC = () => {
       ) : (
         <div className="w-full space-y-8">
           <div className="flex items-center">
-            {mentee?.profile.image_url !== '' ? (
-              <img
-                src={mentee?.profile.image_url}
-                alt="Mentee Avatar"
-                className="w-24 h-24 rounded-full mb-4 object-cover"
-              />
-            ) : (
-              <div className="w-24 h-24 bg-gray-200 rounded-full mb-4 flex items-center justify-center">
-                <UserIcon />
-              </div>
-            )}
+            <ProfilePic
+              src={mentee?.profile.image_url}
+              alt="Mentee Avatar"
+              size="6rem"
+            />
             <div className="ml-5">
               <div className="flex items-center space-x-3">
                 <span className="text-2xl font-semibold">
diff --git a/src/components/MentorApplication/MentorApplication.component.tsx b/src/components/MentorApplication/MentorApplication.component.tsx
index 846a5208..49c63542 100644
--- a/src/components/MentorApplication/MentorApplication.component.tsx
+++ b/src/components/MentorApplication/MentorApplication.component.tsx
@@ -3,7 +3,7 @@ import { getStateColor } from '../../utils';
 import { useParams } from 'react-router-dom';
 import useMentor from '../../hooks/admin/useMentor';
 import Toast from '../Toast';
-import UserIcon from '../../assets/svg/Icons/UserIcon';
+import ProfilePic from '../ProfilePic';
 import ActionButtons from '../ActionButtons';
 import { ApplicationStatus } from '../../enums';
 
@@ -33,17 +33,11 @@ const MentorApplication: React.FC = () => {
       ) : (
         <div className="w-full space-y-8">
           <div className="flex items-center">
-            {mentor?.profile.image_url ? (
-              <img
-                src={mentor?.profile.image_url}
-                alt=""
-                className="w-24 h-24 rounded-full object-cover"
-              />
-            ) : (
-              <div className="w-12 h-12 md:w-24 md:h-24 bg-gray-200 rounded-full flex items-center justify-center">
-                <UserIcon />
-              </div>
-            )}
+            <ProfilePic
+              src={mentor?.profile.image_url}
+              alt="Mentee Avatar"
+              size="6rem"
+            />
             <div className="ml-5">
               <div className="flex items-center space-x-3">
                 <span className="text-2xl font-semibold">