Make image error code more robust

I was trying to fix the image flicker issue - but that's just a chrome bug when the debug panel is open
BraverElliot · Jun 6, 2024 · 14defb1 · 14defb1
1 parent ee6536b
commit 14defb1
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
@@ -266,19 +266,22 @@ export function ContractPageContent(props: ContractParams) {
     }
   }, [pointsString, newBets.length])
 
-  const { isResolved, outcomeType, resolution, closeTime, creatorId } = contract
+  const {
+    isResolved,
+    outcomeType,
+    resolution,
+    closeTime,
+    creatorId,
+    coverImageUrl,
+  } = contract
 
   const isAdmin = useAdmin()
   const isMod = useTrusted()
   const isCreator = creatorId === user?.id
   const isClosed = !!(closeTime && closeTime < Date.now())
   const [showResolver, setShowResolver] = useState(false)
   const [showReview, setShowReview] = useState(false)
-  const [coverImageUrl, setCoverImageUrl] = useState(contract.coverImageUrl)
-  // unhide on upload
-  useEffect(() => {
-    setCoverImageUrl(contract.coverImageUrl)
-  }, [contract.coverImageUrl])
+  const [imageError, setImageError] = useState(false)
 
   useSaveReferral(user, {
     defaultReferrerUsername: contract.creatorUsername,
@@ -356,7 +359,7 @@ export function ContractPageContent(props: ContractParams) {
                 : 'top-[-92px] h-[140px]'
             )}
           >
-            {coverImageUrl && (
+            {coverImageUrl && !imageError && (
               <div className="absolute -top-10 bottom-0 left-0 right-0 -z-10">
                 <Image
                   fill
@@ -369,7 +372,7 @@ export function ContractPageContent(props: ContractParams) {
                       contractId: contract.id,
                       imageUrl: coverImageUrl,
                     })
-                    setCoverImageUrl(undefined)
+                    setImageError(true)
                   }}
                   priority
                 />