diff --git a/src/components/app-body/nostr/content-creators/content-card.js b/src/components/app-body/nostr/content-creators/content-card.js index 028faf5..f61135f 100644 --- a/src/components/app-body/nostr/content-creators/content-card.js +++ b/src/components/app-body/nostr/content-creators/content-card.js @@ -3,7 +3,7 @@ */ import React, { useState, useEffect } from 'react' -import { Card } from 'react-bootstrap' +import { Card, Spinner } from 'react-bootstrap' import Jdenticon from '@chris.troutner/react-jdenticon' import CopyOnClick from '../../bch-wallet/copy-on-click.js' import FollowBtn from './follow-btn.js' @@ -11,9 +11,10 @@ import FollowBtn from './follow-btn.js' function ContentCard (props) { const { creator, followList, refreshFollowList } = props const [profile, setProfile] = useState(null) + const [imageError, setImageError] = useState(false) useEffect(() => { - setProfile(creator?.profile || {}) + setProfile(creator?.profile) }, [creator.profile]) const goToProfile = () => { @@ -21,6 +22,10 @@ function ContentCard (props) { window.open(profileUrl, '_blank') } + const handleImageError = (type) => { + setImageError(true) + } + return ( <> @@ -34,9 +39,33 @@ function ContentCard (props) {
{/* Profile Picture */} -
- -
+ {(profile && profile.picture && !imageError) && ( +
+ Profile handleImageError('picture')} + /> +
+ + )} + {/* Default profile Picture */} + {((profile && !profile.picture) || imageError) && ( +
+ +
+ )} + {/** */} + {!profile && ( +
+ +
+ )} {/* Creator Info */}
@@ -113,9 +142,33 @@ function ContentCard (props) { {/* Mobile Layout - Vertical */}
{/* Profile Picture */} -
- -
+ {(profile && profile.picture && !imageError) && ( +
+ Profile handleImageError('picture')} + /> +
+ + )} + {/* Default profile Picture */} + {((profile && !profile.picture) || imageError) && ( +
+ +
+ )} + {/** */} + {!profile && ( +
+ +
+ )} {/* Creator Info */}
diff --git a/src/components/app-body/nostr/profile/profile-read.js b/src/components/app-body/nostr/profile/profile-read.js index ba3c1e8..1ba25e2 100644 --- a/src/components/app-body/nostr/profile/profile-read.js +++ b/src/components/app-body/nostr/profile/profile-read.js @@ -89,7 +89,7 @@ function ProfileRead (props) { ? ( Profile picture handleImageError('picture')}