Image loading and auth

2026-05-01 06:32:44 -05:00 · 2025-11-23 02:27:09 -06:00
parent b61bd2f8d6
commit 2b7268b3f6
4 changed files with 158 additions and 5 deletions
@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react'
+
+export default function AuthImage({ src, token, alt, className, ...props }) {
+    const [imageSrc, setImageSrc] = useState(null)
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState(false)
+
+    useEffect(() => {
+        let objectUrl = null
+        let active = true
+
+        const fetchImage = async () => {
+            setLoading(true)
+            setError(false)
+            try {
+                const response = await fetch(src, {
+                    headers: {
+                        'Authorization': token
+                    }
+                })
+
+                if (!response.ok) {
+                    throw new Error('Failed to load image')
+                }
+
+                const blob = await response.blob()
+                if (active) {
+                    objectUrl = URL.createObjectURL(blob)
+                    setImageSrc(objectUrl)
+                    setLoading(false)
+                }
+            } catch (err) {
+                if (active) {
+                    console.error("Error loading image:", err)
+                    setError(true)
+                    setLoading(false)
+                }
+            }
+        }
+
+        if (src && token) {
+            fetchImage()
+        } else {
+            setLoading(false)
+        }
+
+        return () => {
+            active = false
+            if (objectUrl) {
+                URL.revokeObjectURL(objectUrl)
+            }
+        }
+    }, [src, token])
+
+    if (loading) {
+        return <div className={`bg-gray-800 animate-pulse ${className}`} />
+    }
+
+    if (error || !imageSrc) {
+        return <div className={`bg-gray-800 flex items-center justify-center text-gray-500 ${className}`}>Error</div>
+    }
+
+    return <img src={imageSrc} alt={alt} className={className} {...props} />
+}
+