fix: 🐛

src/components/BottomNavigationBar/AccountButton.tsx

@@ -1,20 +1,15 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Skeleton } from '@/components/ui/skeleton'
-import { generateImageByPubkey } from '@/lib/pubkey'
 import { cn } from '@/lib/utils'
 import { usePrimaryPage } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
 import { UserRound } from 'lucide-react'
 import { useMemo } from 'react'
+import { SimpleUserAvatar } from '../UserAvatar'
 import BottomNavigationBarItem from './BottomNavigationBarItem'
 
 export default function AccountButton() {
   const { navigate, current, display } = usePrimaryPage()
   const { pubkey, profile } = useNostr()
-  const defaultAvatar = useMemo(
-    () => (profile?.pubkey ? generateImageByPubkey(profile.pubkey) : ''),
-    [profile]
-  )
   const active = useMemo(() => current === 'me' && display, [display, current])
 
   return (
@@ -26,12 +21,10 @@ export default function AccountButton() {
     >
       {pubkey ? (
         profile ? (
-          <Avatar className={cn('w-7 h-7', active ? 'ring-primary ring-1' : '')}>
+          <SimpleUserAvatar
-            <AvatarImage src={profile.avatar} className="object-cover object-center" />
+            userId={pubkey}
-            <AvatarFallback>
+            className={cn('w-7 h-7', active ? 'ring-primary ring-1' : '')}
-              <img src={defaultAvatar} />
+          />
-            </AvatarFallback>
-          </Avatar>
         ) : (
           <Skeleton className={cn('w-7 h-7 rounded-full', active ? 'ring-primary ring-1' : '')} />
         )

src/components/Image/index.tsx

@@ -89,7 +89,6 @@ export default function Image({
           src={imageUrl}
           alt={alt}
           decoding="async"
-          loading="lazy"
           draggable={false}
           {...props}
           onLoad={handleLoad}

src/components/ImageGallery/index.tsx

@@ -1,6 +1,7 @@
 import { randomString } from '@/lib/random'
 import { cn } from '@/lib/utils'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
+import blossomService from '@/services/blossom.service'
 import modalManager from '@/services/modal-manager.service'
 import { TImetaInfo } from '@/types'
 import { ReactNode, useEffect, useMemo, useState } from 'react'
@@ -26,6 +27,7 @@ export default function ImageGallery({
   const id = useMemo(() => `image-gallery-${randomString()}`, [])
   const { autoLoadMedia } = useContentPolicy()
   const [index, setIndex] = useState(-1)
+  const [slides, setSlides] = useState<{ src: string }[]>(images.map(({ url }) => ({ src: url })))
   useEffect(() => {
     if (index >= 0) {
       modalManager.register(id, () => {
@@ -36,6 +38,49 @@ export default function ImageGallery({
     }
   }, [index])
 
+  useEffect(() => {
+    const loadImages = async () => {
+      const slides = await Promise.all(
+        images.map(({ url, pubkey }) => {
+          return new Promise<{ src: string }>((resolve) => {
+            const img = new window.Image()
+            let validUrl = url
+            img.onload = () => {
+              blossomService.markAsSuccess(url, validUrl)
+              resolve({ src: validUrl })
+            }
+            img.onerror = () => {
+              blossomService.tryNextUrl(url).then((nextUrl) => {
+                if (nextUrl) {
+                  validUrl = nextUrl
+                  resolve({ src: validUrl })
+                } else {
+                  resolve({ src: url })
+                }
+              })
+            }
+            if (pubkey) {
+              blossomService
+                .getValidUrl(url, pubkey)
+                .then((u) => {
+                  validUrl = u
+                  img.src = validUrl
+                })
+                .catch(() => {
+                  resolve({ src: url })
+                })
+            } else {
+              img.src = url
+            }
+          })
+        })
+      )
+      setSlides(slides)
+    }
+
+    loadImages()
+  }, [images])
+
   const handlePhotoClick = (event: React.MouseEvent, current: number) => {
     event.stopPropagation()
     event.preventDefault()
@@ -62,9 +107,10 @@ export default function ImageGallery({
     imageContent = (
       <Image
         key={0}
-        className="max-h-[80vh] sm:max-h-[50vh] cursor-zoom-in object-contain"
+        className="max-h-[80vh] sm:max-h-[50vh] object-contain"
         classNames={{
-          errorPlaceholder: 'aspect-square h-[30vh]'
+          errorPlaceholder: 'aspect-square h-[30vh]',
+          wrapper: 'cursor-zoom-in'
         }}
         image={displayImages[0]}
         onClick={(e) => handlePhotoClick(e, 0)}
@@ -76,7 +122,8 @@ export default function ImageGallery({
         {displayImages.map((image, i) => (
           <Image
             key={i}
-            className="aspect-square w-full cursor-zoom-in"
+            className="aspect-square w-full"
+            classNames={{ wrapper: 'cursor-zoom-in' }}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -89,7 +136,8 @@ export default function ImageGallery({
         {displayImages.map((image, i) => (
           <Image
             key={i}
-            className="aspect-square w-full cursor-zoom-in"
+            className="aspect-square w-full"
+            classNames={{ wrapper: 'cursor-zoom-in' }}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -106,7 +154,7 @@ export default function ImageGallery({
           <div onClick={(e) => e.stopPropagation()}>
             <Lightbox
               index={index}
-              slides={images.map(({ url }) => ({ src: url }))}
+              slides={slides}
               plugins={[Zoom]}
               open={index >= 0}
               close={() => setIndex(-1)}