Context: I'm working on a React application where users select their profile image during onboarding. The image is uploaded to AWS S3, and a pre-signed URL is generated and sent to the frontend.

Issue: When I switch browser tabs and come back to my app, the avatar component briefly shows a blank state before reloading the image. This happens only when the image is coming from the S3 pre-signed URL. For context, the blank state is displayed even when the S3 URL hasn't expired yet.

Backend code to generate presigned url and fetch it from backend

public ProfileDto getProfileDto(User user) {
    return Optional.ofNullable(user.getProfile())
            .map(profile -> ProfileDto.builder()
                    .color(profile.getColor())
                    .type(profile.getType())
                    .svg(profile.getSvg())
                    .preSignedUrl(profileService.getProfileImageUrl(user, profile))
                    .build())
            .orElse(null);
}

public String getProfileImageUrl(User user, Profile profile) {
    if (profile.getS3Key() == null) {
        return null;
    }
    return s3Service.generatePreSignedUrl(bucketName, getS3Key(user, profile));
}

public String generatePreSignedUrl(String bucket, String objectKey) {
        try (S3Presigner presigner = S3Presigner.create()) {
            GetObjectRequest objectRequest = GetObjectRequest.builder()
                    .bucket(bucket)
                    .key(objectKey)
                    .build();

            GetObjectPresignRequest presignRequest = GetObjectPresignRequest.builder()
                    .signatureDuration(Duration.ofMinutes(60))  // The URL will expire in 60 mins.
                    .getObjectRequest(objectRequest)
                    .build();

            PresignedGetObjectRequest presignedRequest = presigner.presignGetObject(presignRequest);
            log.info("Presigned URL generated");

            return presignedRequest.url().toExternalForm();
        }
}

Frontend code to display React Avatar with presigned url

const UserAvatar = (props) => {
    const { userProfileDto, multiplier, initials } = props;
    const size = `calc(${multiplier}rem * var(--mantine-scale))`;

    const [avatarList, setAvatarList] = useState([]);

    return (
        <Avatar style={{ width: size, height: size, minWidth: size }}>
            <AvatarImage src={userProfileDto.preSignedUrl} alt="profile_img" loading="eager" />
            <AvatarFallback>{initials}</AvatarFallback>
        </Avatar>
    );
};

What I've Tried:

• Switching browsers (it works fine with Safari, but not with Chrome)
• Ensuring the avatarUrl state is correctly set when the component mounts.
• Using loading="eager" in the tag to try to force the image to load immediately.
• Keeping the pre-signed URL fresh by ensuring it's valid when being set.
• Checking browser logs for any errors related to image loading (none found).

Expected Behavior: The avatar should remain visible even after switching tabs.

Actual Behavior: When switching away and back to the tab, the avatar briefly disappears (causing a white blank screen) before reloading.

Question: Why does my presigned url image disappear briefly after switching tabs, and how can I prevent this from happening?