web/src/pages/Profile.tsx

@@ -10,6 +10,9 @@ import { isApiError, type ApiError } from "../types/api/error";
 import { Logout } from "../services/AuthService";
 import { useNavigate } from "react-router-dom";
 
+// TODO: Need to cache the image, it returns nothing because it fails with 429 (rate limits)
+//       Though this might just be a development issue, it seems to work in production.
+
 export default function Profile() {
   // Context
   const { getJwt } = use(AuthContext);
@@ -18,6 +21,7 @@ export default function Profile() {
   // Page state
   const [error, setError] = useState<string>("");
   const [user, setUser] = useState<User | null>(null);
+  const [dummyProfileSrc, setDummyProfileSrc] = useState<string>("");
   const [recipes, setRecipes] = useState<Recipe[]>([]);
   const [favorites, setFavorites] = useState<Recipe[]>([]);
   const [activity, setActivity] = useState<Engagement[]>([]);
@@ -81,11 +85,9 @@ export default function Profile() {
   }, [error]);
 
   useEffect(() => {
-    if (activity)
+    if (user)
-      console.log("@activity", activity);
+      setDummyProfileSrc(`https://ui-avatars.com/api/?name=${user?.Name.split(" ")[0]}+${user?.Name.split(" ")[1]}&size=150`);
-  }, [activity]);
+  }, [user]);
-
-
 
   return (
     <>
@@ -96,11 +98,15 @@ export default function Profile() {
             <img
               className="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none"
               src={user?.ImageUrl ?? undefined}
+              onError={e => {
+                e.currentTarget.onerror = null; // prevent infinite loop
+                e.currentTarget.src = dummyProfileSrc;
+              }}
             />
           ) : (
             <img
               className="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none"
-              src={`https://ui-avatars.com/api/?name=${user?.Name.split(" ")[0]}+${user?.Name.split(" ")[1]}&size=150`}
+              src={dummyProfileSrc}
             />
           )}
           <div className="flex flex-col gap-y-4">