I noticed this behavior when trying to create a profile page with my picture on it.
export default function Profile() {
const router = useRouter();
const { pubkey } = router.query;
const { data: userData } = useProfile({
pubkey,
});
return (
<>
<Avatar
src={userData?.picture}
alt={userData?.name}
size={42}
radius="50%"
/>
<Text size="lg" color="white">
{userData?.display_name
? userData.display_name
: `@${pubkey.substring(0, 5)}...`}
</Text>
</>
);
}
The picture would initially load as my current picture, then after a few seconds switch to an old profile pic I used. This can be resolved by always setting userData to the event with the most recent created_at time.