minimize flashing avas

app/plus/components/PlusVotingPage.tsx

@@ -46,7 +46,7 @@ export default function PlusVotingPage() {
       <Progress value={progress} size="xs" colorScheme="pink" mb={6} />
       {previousUser ? (
         <Box textAlign="center" mb={6}>
-          <UserAvatar user={previousUser} isSmall />
+          <UserAvatar user={previousUser} size="sm" />
           <Box my={2} fontSize="sm">
             {getFullUsername(previousUser)}
           </Box>

app/plus/hooks/usePlusVoting.ts

@@ -48,9 +48,16 @@ export default function usePlusVoting() {
       ? (currentIndex / usersForVoting.length) * 100
       : undefined,
     handleVote: (vote: Unpacked<z.infer<typeof votesSchema>>) => {
+      const nextIndex = currentIndex + 1;
       setVotes([...votes, vote]);
-      setCurrentIndex(currentIndex + 1);
+      setCurrentIndex(nextIndex);
       (<HTMLElement>document.activeElement).blur();
+
+      // preload next avatar
+      const next = usersForVoting?.[nextIndex + 1];
+      if (next) {
+        new Image().src = `https://cdn.discordapp.com/avatars/${next.discordId}/${next.discordAvatar}.jpg`;
+      }
     },
     goBack: () => {
       setVotes(votes.slice(0, votes.length - 1));

components/common/UserAvatar.tsx

@@ -11,16 +11,22 @@ const UserAvatar: React.FC<Props & AvatarProps> = ({
   user,
   isSmall,
   ...props
-}) =>
-  user.discordAvatar ? (
-    <Avatar
-      name={user.username}
-      src={`https://cdn.discordapp.com/avatars/${user.discordId}/${
-        user.discordAvatar
-      }.jpg${isSmall ? "?size=40" : ""}`}
-      size={isSmall ? "sm" : undefined}
-      {...props}
-    />
-  ) : null;
+}) => (
+  <Avatar
+    name={user.username}
+    src={
+      user.discordAvatar
+        ? `https://cdn.discordapp.com/avatars/${user.discordId}/${
+            user.discordAvatar
+          }.jpg${isSmall ? "?size=40" : ""}`
+        : // default avatar
+          `https://cdn.discordapp.com/avatars/455039198672453645/f809176af93132c3db5f0a5019e96339.jpg${
+            isSmall ? "?size=40" : ""
+          }`
+    }
+    size={isSmall ? "sm" : undefined}
+    {...props}
+  />
+);
 
 export default UserAvatar;