From 4c16006effa0b53852e4cc67a3e0860d5acb97ab Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 19 Mar 2021 10:20:51 +0200
Subject: [PATCH] minimize flashing avas

---
 app/plus/components/PlusVotingPage.tsx |  2 +-
 app/plus/hooks/usePlusVoting.ts        |  9 ++++++++-
 components/common/UserAvatar.tsx       | 28 ++++++++++++++++----------
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/app/plus/components/PlusVotingPage.tsx b/app/plus/components/PlusVotingPage.tsx
index 9aa97b942..3f7dc36c8 100644
--- a/app/plus/components/PlusVotingPage.tsx
+++ b/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>
diff --git a/app/plus/hooks/usePlusVoting.ts b/app/plus/hooks/usePlusVoting.ts
index 1a1e87d7d..50d0c30f2 100644
--- a/app/plus/hooks/usePlusVoting.ts
+++ b/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));
diff --git a/components/common/UserAvatar.tsx b/components/common/UserAvatar.tsx
index 4fa1e82a2..63b42a69f 100644
--- a/components/common/UserAvatar.tsx
+++ b/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;