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>

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,