ReactJS: Set priority order of component - if field exists - reactjs

Question

I have the following:
const useItemsF = () => {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);
const user = firebase.auth().currentUser;
useEffect(() => {
const unsubscribe = firebase
.firestore()
.collection("user")
.where("id", "==", `${user.uid}`)
.onSnapshot(snapshot => {
const listItemsUsers = snapshot.docs.map(doc => ({
id: doc.id,
...doc.data()
}));
setItems(listItemsUsers);
setLoading(false);
});
console.log(loading);
return () => unsubscribe();
}, []);
return items;
};
I then use the following in my return:
const ItemList = () => {
const listItemF = useItemsF();
}
return (
<>
<div className="wrapper">
<h1><FontAwesomeIcon icon={faTachometer} size="lg" /></h1>
<Card elevation={3} className={classes.card}>
<CardContent className="cardoverride">
{listItemF?.length && listItemF[0]?.userProfilePic?.userPicURL !== 'undefined' ? <img className="dashimage" src={listItemF[0]?.userProfilePic?.userPicURL} /> : (
<img className="dashimage" src="/Image.jpg" />
)}
</CardContent>
</Card>
</div>
</>
);
export default App;
This works fine, but what I end up seeing in Image.jpg before the userProfilePic. How can I restructure this so you don't see the Image.jpg at all? So if the user has set a Profile Pic, this shows instantly (or at least does not show the Image.jpg)

Answer 1

so what is happening is, the component is rendering first (at this time, items.userProfilePik doesnt exist, so the /Image.jpg is rendered). Once the comp is done rendering, then your useEffect fires, where your firebase stuff is happening, which i'm guessing fetches the profilePik from the database and sets state using setItems. Only now, will your items.userProfilePik render.
One way to solve this problem is initiate another state as such:
const [loading, setLoading] = useState(true)
//then in your useEffect
//...
setItems(listItemsUsers);
setLoading(false); //add this line
//...
//then in your return statement do something like:
return (
<>
<div className="wrapper">
<h1><FontAwesomeIcon icon={faTachometer} size="lg" /></h1>
<Card elevation={3} className={classes.card}>
<CardContent className="cardoverride">
{ loading
? <div>Loading...</div>
: listItemF?.length && listItemF[0]?.userProfilePic?.userPicURL !== undefined
? <img className="dashimage" src={listItemF[0]?.userProfilePic?.userPicURL} />
: <img className="dashimage" src="/Image.jpg" /> }
</CardContent>
</Card>
</div>
</>
);