Add loading="lazy" to expo-image on web (#9480)

* add `loading="lazy"` to expo-image

* add `loading="lazy"` to embed cards, avatars

* get rid of useless image wrapper indirection

* move image components to components dir

* fix imports

* fix import

* Keep avis eager

---------

Co-authored-by: Eric Bailey <git@esb.lol>

patches/expo-image+3.0.10.patch

@@ -0,0 +1,103 @@
+diff --git a/node_modules/expo-image/build/Image.types.d.ts b/node_modules/expo-image/build/Image.types.d.ts
+index 022ae48..416504f 100644
+--- a/node_modules/expo-image/build/Image.types.d.ts
++++ b/node_modules/expo-image/build/Image.types.d.ts
+@@ -152,6 +152,16 @@ export interface ImageProps extends Omit<ViewProps, 'style' | 'children'> {
+      * @default 'normal'
+      */
+     priority?: 'low' | 'normal' | 'high' | null;
++    /**
++     * The loading behavior for the image. Maps to the native HTML `loading` attribute on web.
++     *
++     * - `'lazy'` - Defers loading until the image is near the viewport.
++     * - `'eager'` - Loads the image immediately.
++     *
++     * @default undefined
++     * @platform web
++     */
++    loading?: 'lazy' | 'eager' | null;
+     /**
+      * Determines whether to cache the image and where: on the disk, in the memory or both.
+      *
+diff --git a/node_modules/expo-image/src/ExpoImage.web.tsx b/node_modules/expo-image/src/ExpoImage.web.tsx
+index 2a49ff0..1c3de93 100644
+--- a/node_modules/expo-image/src/ExpoImage.web.tsx
++++ b/node_modules/expo-image/src/ExpoImage.web.tsx
+@@ -70,6 +70,7 @@ export default function ExpoImage({
+   onLoadEnd,
+   onDisplay,
+   priority,
++  loading,
+   blurRadius,
+   recyclingKey,
+   style,
+@@ -118,6 +119,7 @@ export default function ExpoImage({
+               accessibilityLabel={accessibilityLabel ?? alt}
+               cachePolicy={cachePolicy}
+               priority={priority}
++              loading={loading}
+               tintColor={tintColor}
+             />
+           ),
+@@ -149,6 +151,7 @@ export default function ExpoImage({
+           className={className}
+           cachePolicy={cachePolicy}
+           priority={priority}
++          loading={loading}
+           contentPosition={selectedSource ? contentPosition : { top: '50%', left: '50%' }}
+           hashPlaceholderContentPosition={contentPosition}
+           hashPlaceholderStyle={imageHashStyle}
+diff --git a/node_modules/expo-image/src/Image.types.ts b/node_modules/expo-image/src/Image.types.ts
+index 9dec0e7..61c1621 100644
+--- a/node_modules/expo-image/src/Image.types.ts
++++ b/node_modules/expo-image/src/Image.types.ts
+@@ -178,6 +178,17 @@ export interface ImageProps extends Omit<ViewProps, 'style' | 'children'> {
+    */
+   priority?: 'low' | 'normal' | 'high' | null;
+ 
++  /**
++   * The loading behavior for the image. Maps to the native HTML `loading` attribute on web.
++   *
++   * - `'lazy'` - Defers loading until the image is near the viewport.
++   * - `'eager'` - Loads the image immediately.
++   *
++   * @default undefined
++   * @platform web
++   */
++  loading?: 'lazy' | 'eager' | null;
++
+   /**
+    * Determines whether to cache the image and where: on the disk, in the memory or both.
+    *
+diff --git a/node_modules/expo-image/src/web/ImageWrapper.tsx b/node_modules/expo-image/src/web/ImageWrapper.tsx
+index e8f891d..89a5cb1 100644
+--- a/node_modules/expo-image/src/web/ImageWrapper.tsx
++++ b/node_modules/expo-image/src/web/ImageWrapper.tsx
+@@ -30,6 +30,7 @@ const ImageWrapper = React.forwardRef(
+       contentPosition,
+       hashPlaceholderContentPosition,
+       priority,
++      loading,
+       style,
+       hashPlaceholderStyle,
+       tintColor,
+@@ -82,6 +83,7 @@ const ImageWrapper = React.forwardRef(
+           // @ts-ignore
+           // eslint-disable-next-line react/no-unknown-property
+           fetchPriority={getFetchPriorityFromImagePriority(priority || 'normal')}
++          loading={loading || undefined}
+           {...getImageWrapperEventHandler(events, sourceWithHeaders)}
+           {...getImgPropsFromSource(source)}
+           {...props}
+diff --git a/node_modules/expo-image/src/web/ImageWrapper.types.ts b/node_modules/expo-image/src/web/ImageWrapper.types.ts
+index 19bbe2f..179837f 100644
+--- a/node_modules/expo-image/src/web/ImageWrapper.types.ts
++++ b/node_modules/expo-image/src/web/ImageWrapper.types.ts
+@@ -29,6 +29,7 @@ export type ImageWrapperProps = {
+   contentPosition?: ImageContentPositionObject;
+   hashPlaceholderContentPosition?: ImageContentPositionObject;
+   priority?: string | null;
++  loading?: 'lazy' | 'eager' | null;
+   style: CSSProperties;
+   tintColor?: string | null;
+   hashPlaceholderStyle?: CSSProperties;

src/components/Post/Embed/ExternalEmbed/ExternalPlayer.tsx

@@ -226,6 +226,7 @@ export function ExternalPlayer({
               style={[a.flex_1]}
               source={{uri: link.thumb}}
               accessibilityIgnoresInvertColors
+              loading="lazy"
             />
             <Fill
               style={[

src/components/Post/Embed/ExternalEmbed/index.tsx

@@ -100,6 +100,7 @@ export const ExternalEmbed = ({
               style={[a.aspect_card]}
               source={{uri: imageUri}}
               accessibilityIgnoresInvertColors
+              loading="lazy"
             />
           ) : undefined}
 

src/components/Post/Embed/ImageEmbed.tsx

@@ -10,9 +10,9 @@ import {Image} from 'expo-image'
 
 import {useLightboxControls} from '#/state/lightbox'
 import {type Dimensions} from '#/view/com/lightbox/ImageViewing/@types'
-import {AutoSizedImage} from '#/view/com/util/images/AutoSizedImage'
-import {ImageLayoutGrid} from '#/view/com/util/images/ImageLayoutGrid'
 import {atoms as a} from '#/alf'
+import {AutoSizedImage} from '#/components/images/AutoSizedImage'
+import {ImageLayoutGrid} from '#/components/images/ImageLayoutGrid'
 import {PostEmbedViewContext} from '#/components/Post/Embed/types'
 import {type EmbedType} from '#/types/bsky/post'
 import {type CommonProps} from './types'

src/components/Post/Embed/VideoEmbed/index.tsx

@@ -6,10 +6,10 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
 import {atoms as a} from '#/alf'
 import {Button} from '#/components/Button'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
+import {ConstrainedImage} from '#/components/images/AutoSizedImage'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 import {VideoEmbedInnerNative} from './VideoEmbedInner/VideoEmbedInnerNative'
 import * as VideoFallback from './VideoEmbedInner/VideoFallback'

src/components/Post/Embed/VideoEmbed/index.web.tsx

@@ -13,10 +13,10 @@ import {useLingui} from '@lingui/react'
 
 import {isFirefox} from '#/lib/browser'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
 import {atoms as a, useTheme} from '#/alf'
 import {useIsWithinMessage} from '#/components/dms/MessageContext'
 import {useFullscreen} from '#/components/hooks/useFullscreen'
+import {ConstrainedImage} from '#/components/images/AutoSizedImage'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {
   HLSUnsupportedError,

src/components/images/AutoSizedImage.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react'
+import {useMemo, useRef} from 'react'
 import {type DimensionValue, Pressable, View} from 'react-native'
 import Animated, {
   type AnimatedRef,
@@ -34,7 +34,7 @@ export function ConstrainedImage({
    * Computed as a % value to apply as `paddingTop`, this basically controls
    * the height of the image.
    */
-  const outerAspectRatio = React.useMemo<DimensionValue>(() => {
+  const outerAspectRatio = useMemo<DimensionValue>(() => {
     const ratio = isNative
       ? Math.min(1 / aspectRatio, minMobileAspectRatio ?? 16 / 9) // 9:16 bounding box
       : Math.min(1 / aspectRatio, 1) // 1:1 bounding box
@@ -127,6 +127,7 @@ export function AutoSizedImage({
             }
           }
         }}
+        loading="lazy"
       />
       <MediaInsetBorder />
 

src/components/images/Gallery.tsx

@@ -29,7 +29,7 @@ interface Props {
   viewContext?: PostEmbedViewContext
   insetBorderStyle?: StyleProp<ViewStyle>
   containerRefs: AnimatedRef<any>[]
-  thumbDimsRef: React.MutableRefObject<(Dimensions | null)[]>
+  thumbDimsRef: React.RefObject<(Dimensions | null)[]>
 }
 
 export function GalleryItem({
@@ -87,6 +87,7 @@ export function GalleryItem({
               height: e.source.height,
             }
           }}
+          loading="lazy"
         />
         <MediaInsetBorder style={insetBorderStyle} />
       </Pressable>

src/components/images/ImageLayoutGrid.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import {useRef} from 'react'
 import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {type AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
 import {type AppBskyEmbedImages} from '@atproto/api'
 
+import {type Dimensions} from '#/view/com/lightbox/ImageViewing/@types'
 import {atoms as a, useBreakpoints} from '#/alf'
 import {PostEmbedViewContext} from '#/components/Post/Embed/types'
-import {type Dimensions} from '../../lightbox/ImageViewing/@types'
 import {GalleryItem} from './Gallery'
 
 interface ImageLayoutGridProps {
@@ -60,7 +60,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
   const containerRef2 = useAnimatedRef()
   const containerRef3 = useAnimatedRef()
   const containerRef4 = useAnimatedRef()
-  const thumbDimsRef = React.useRef<(Dimensions | null)[]>([])
+  const thumbDimsRef = useRef<(Dimensions | null)[]>([])
 
   switch (count) {
     case 2: {

src/view/com/util/UserAvatar.tsx

@@ -1,6 +1,6 @@
 import {memo, useCallback, useMemo, useState} from 'react'
 import {
-  Image,
+  Image as RNImage,
   Pressable,
   type StyleProp,
   StyleSheet,
@@ -8,6 +8,7 @@ import {
   type ViewStyle,
 } from 'react-native'
 import Svg, {Circle, Path, Rect} from 'react-native-svg'
+import {Image as ExpoImage} from 'expo-image'
 import {type ModerationUI} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
@@ -37,7 +38,6 @@ import {
 } from '#/state/gallery'
 import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
 import {EditImageDialog} from '#/view/com/composer/photos/EditImageDialog'
-import {HighPriorityImage} from '#/view/com/util/images/Image'
 import {atoms as a, tokens, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
@@ -289,7 +289,7 @@ let UserAvatar = ({
     !((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
     <View style={containerStyle}>
       {usePlainRNImage ? (
-        <Image
+        <RNImage
           accessibilityIgnoresInvertColors
           testID="userAvatarImage"
           style={aviStyle}
@@ -301,7 +301,7 @@ let UserAvatar = ({
           onLoad={onLoad}
         />
       ) : (
-        <HighPriorityImage
+        <ExpoImage
           testID="userAvatarImage"
           style={aviStyle}
           contentFit="cover"
@@ -441,7 +441,7 @@ let EditableUserAvatar = ({
           {({props}) => (
             <Pressable {...props} testID="changeAvatarBtn">
               {avatar ? (
-                <HighPriorityImage
+                <ExpoImage
                   testID="userAvatarImage"
                   style={aviStyle}
                   source={{uri: avatar}}

src/view/com/util/images/Image.tsx

@@ -1,13 +0,0 @@
-import {Image, type ImageProps, type ImageSource} from 'expo-image'
-
-interface HighPriorityImageProps extends ImageProps {
-  source: ImageSource
-}
-export function HighPriorityImage({source, ...props}: HighPriorityImageProps) {
-  const updatedSource = {
-    uri: typeof source === 'object' && source ? source.uri : '',
-  } satisfies ImageSource
-  return (
-    <Image accessibilityIgnoresInvertColors source={updatedSource} {...props} />
-  )
-}

src/view/com/util/images/Image.web.tsx

@@ -1,3 +0,0 @@
-import {Image} from 'react-native'
-
-export const HighPriorityImage = Image