feat(mobile): image styles

apps/mobile/src/components/ui/image/Image.tsx

@@ -1,4 +1,8 @@
-import type { ImageErrorEventData, ImageProps as ExpoImageProps } from "expo-image"
+import type {
+  ImageErrorEventData,
+  ImageLoadEventData,
+  ImageProps as ExpoImageProps,
+} from "expo-image"
 import { Image as ExpoImage } from "expo-image"
 import { forwardRef, useCallback, useMemo, useState } from "react"
 import { useColor } from "react-native-uikit-colors"
@@ -38,9 +42,13 @@ export const Image = forwardRef<ExpoImage, ImageProps>(
     )
 
     const [isLoading, setIsLoading] = useState(true)
-    const onLoad = useCallback(() => {
-      setIsLoading(false)
-    }, [])
+    const onLoad = useCallback(
+      (e: ImageLoadEventData) => {
+        setIsLoading(false)
+        rest.onLoad?.(e)
+      },
+      [rest],
+    )
 
     const backgroundColor = useColor("systemFill")
 
@@ -50,6 +58,8 @@ export const Image = forwardRef<ExpoImage, ImageProps>(
 
     return (
       <ExpoImage
+        recyclingKey={source?.uri}
+        {...rest}
         source={isError ? safeSource : proxiesSafeSource}
         onError={onError}
         onLoad={onLoad}
@@ -62,8 +72,6 @@ export const Image = forwardRef<ExpoImage, ImageProps>(
           ...(typeof rest.style === "object" && { ...rest.style }),
           ...(isLoading && { backgroundColor }),
         }}
-        recyclingKey={source?.uri}
-        {...rest}
         ref={ref}
       />
     )

apps/mobile/src/modules/entry-content/EntryReadHistory.tsx

@@ -62,7 +62,13 @@ export const EntryReadHistory = ({ entryId }: { entryId: string }) => {
               ],
             }}
           >
-            <UserAvatar preview={false} size={25} name={user.name!} image={user.image} />
+            <UserAvatar
+              preview={false}
+              size={25}
+              name={user.name!}
+              image={user.image}
+              className="border-secondary-system-fill border"
+            />
           </Pressable>
         )
       })}