fix(ImageFromHash): show default avatar while current source loading (#…

…115) fix(ImageFromHash): show default avatar while current source loading to prevent framer motion bugs
discordplace · Oct 25, 2024 · 84fc408 · 84fc408
1 parent 0926937
commit 84fc408
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/client/app/components/ImageFromHash/UserAvatar.jsx b/client/app/components/ImageFromHash/UserAvatar.jsx
@@ -9,7 +9,7 @@ import { useLocalStorage } from 'react-use';
 export default function UserAvatar({ id, hash, format, size, className, motionOptions, ...props }) {
   const defaultAvatarURL = '/default-discord-avatar.png';
 
-  const [currentSource, setCurrentSource] = useState(defaultAvatarURL);
+  const [currentSource, setCurrentSource] = useState(null);
   const [isErrorOccurred, setIsErrorOccurred] = useState(false);
   const [hashesRefreshed, setHashesRefreshed] = useLocalStorage('hashesRefreshed', []);
 
@@ -81,7 +81,7 @@ export default function UserAvatar({ id, hash, format, size, className, motionOp
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, hash]);
 
-  if (!hash) return (
+  if (!hash || !currentSource) return (
     <MotionImage
       key={`user-avatar-${id}-replaced-with-default-avatar`}
       src={defaultAvatarURL}

diff --git a/client/app/components/ImageFromHash/UserBanner.jsx b/client/app/components/ImageFromHash/UserBanner.jsx
@@ -9,7 +9,7 @@ import { useLocalStorage } from 'react-use';
 export default function UserBanner({ id, hash, format, size, className, motionOptions, ...props }) {
   const defaultBannerURL = '/default-discord-banner.png';
 
-  const [currentSource, setCurrentSource] = useState(defaultBannerURL);
+  const [currentSource, setCurrentSource] = useState(null);
   const [isErrorOccurred, setIsErrorOccurred] = useState(false);
   const [hashesRefreshed, setHashesRefreshed] = useLocalStorage('hashesRefreshed', []);
 
@@ -81,7 +81,7 @@ export default function UserBanner({ id, hash, format, size, className, motionOp
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, hash]);
 
-  if (!hash) return (
+  if (!hash || !currentSource) return (
     <MotionImage
       key={`user-banner-${id}-replaced-with-default-banner`}
       src={defaultBannerURL}