Fix loop fallback and transparent badge on first error

cesium · Dec 6, 2023 · 0a4dbc1 · 0a4dbc1
1 parent 9a9f060
commit 0a4dbc1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/components/Badge/index.tsx b/components/Badge/index.tsx
@@ -11,10 +11,18 @@ interface BadgeProps {
 
 export default function Badge({ name, id, avatar, tokens, owned }: BadgeProps) {
   const [badgeLoaded, setBadgeLoaded] = useState(false);
+  const [fallbackRan, setFallbackRan] = useState(false)
 
   const imageOnError: ReactEventHandler<HTMLImageElement> = (e) => {
+    // prevent infinite loop fallback
+    if (fallbackRan) {
+      setBadgeLoaded(true);
+      return
+    }
+
+    setBadgeLoaded(false);
     e.currentTarget.src = "/images/badges/badge-not-found.svg";
-    setBadgeLoaded(true)
+    setFallbackRan(true)
   };
 
   return (

diff --git a/components/GoToTop/index.tsx b/components/GoToTop/index.tsx
@@ -24,7 +24,7 @@ export default function GoToTop() {
 
   return (
     <button
-      className={`fixed right-5 bottom-5 cursor-pointer w-12 h-12 bg-white rounded-full transition-translate duration-300 ${
+      className={`transition-translate fixed right-5 bottom-5 h-12 w-12 cursor-pointer rounded-full bg-white duration-300 ${
         showButton ? "" : "translate-y-52"
       }`}
       onClick={goToTop}