chore: cleanup images, officially retire OpaqueImageView

src/app/Components/ArticleCard.tsx

@@ -1,6 +1,14 @@
-import { Spacer, Flex, useTheme, Text, Touchable, SkeletonBox, SkeletonText } from "@artsy/palette-mobile"
+import {
+  Spacer,
+  Flex,
+  useTheme,
+  Text,
+  Touchable,
+  SkeletonBox,
+  SkeletonText,
+  Image,
+} from "@artsy/palette-mobile"
 import { ArticleCard_article$data } from "__generated__/ArticleCard_article.graphql"
-import { OpaqueImageView } from "app/Components/OpaqueImageView2"
 import { navigate } from "app/system/navigation/navigate"
 import { compact } from "lodash"
 import { DateTime } from "luxon"
@@ -42,8 +50,8 @@ export const ArticleCard: React.FC<ArticleCardProps> = ({ article, onPress, isFl
             (isFluid ? (
               <>
                 <View style={{ width }}>
-                  <OpaqueImageView
-                    imageURL={imageURL}
+                  <Image
+                    src={imageURL}
                     // aspect ratio is fixed to 1.33 to match the old image aspect ratio
                     aspectRatio={1.33}
                     // 40 here comes from the mx={2} from the parent component
@@ -52,8 +60,8 @@ export const ArticleCard: React.FC<ArticleCardProps> = ({ article, onPress, isFl
                 </View>
               </>
             ) : (
-              <OpaqueImageView
-                imageURL={imageURL}
+              <Image
+                src={imageURL}
                 width={ARTICLE_CARD_IMAGE_WIDTH}
                 height={ARTICLE_CARD_IMAGE_HEIGHT}
               />
@@ -97,10 +105,7 @@ export const ArticleCardContainer = createFragmentContainer(ArticleCard, {
 
 export const SkeletonArticleCard: React.FC = () => (
   <Flex maxWidth={ARTICLE_CARD_IMAGE_WIDTH}>
-    <SkeletonBox
-      height={ARTICLE_CARD_IMAGE_HEIGHT}
-      width={ARTICLE_CARD_IMAGE_WIDTH}
-    />
+    <SkeletonBox height={ARTICLE_CARD_IMAGE_HEIGHT} width={ARTICLE_CARD_IMAGE_WIDTH} />
     <Spacer y={1} />
     <SkeletonText variant="lg-display" mb={0.5}>
       10 Shows we suggest you don't miss during Berlin Art Week
@@ -113,4 +118,4 @@ export const SkeletonArticleCard: React.FC = () => (
       Art • Sep 10, 2024
     </SkeletonText>
   </Flex>
-)
+)

src/app/Components/Artist/ArtistShows/ArtistShow.tsx

@@ -1,7 +1,6 @@
 import { ActionType, ContextModule, OwnerType, TappedShowGroup } from "@artsy/cohesion"
-import { Touchable } from "@artsy/palette-mobile"
+import { Image, Touchable } from "@artsy/palette-mobile"
 import { ArtistShow_show$data, ArtistShow_show$key } from "__generated__/ArtistShow_show.graphql"
-import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView"
 import { navigate } from "app/system/navigation/navigate"
 import { useFeatureFlag } from "app/utils/hooks/useFeatureFlag"
 import { hrefForPartialShow } from "app/utils/router"
@@ -42,13 +41,15 @@ export const ArtistShow: React.FC<Props> = ({ styles, show, index, imageDimensio
     <Touchable onPress={handleTap} haptic>
       <View style={[styles?.container]}>
         <View style={[styles?.imageMargin]}>
-          <OpaqueImageView
-            imageURL={imageURL}
-            width={imageDimensions.width}
-            height={imageDimensions.height}
-            blurhash={showBlurhash ? image?.blurhash : undefined}
-            style={[{ overflow: "hidden", borderRadius: 2, flex: 0 }]}
-          />
+          {!!imageURL && (
+            <Image
+              src={imageURL}
+              width={imageDimensions.width}
+              height={imageDimensions.height}
+              blurhash={showBlurhash ? image?.blurhash : undefined}
+              style={[{ overflow: "hidden", borderRadius: 2, flex: 0 }]}
+            />
+          )}
         </View>
         {/* this wrapper required to make numberOfLines work when parent is a row */}
         <View style={{ flex: 1 }}>

src/app/Components/ArtistAutosuggest/ArtistAutosuggestRow.tsx

@@ -1,6 +1,5 @@
-import { Spacer, Flex } from "@artsy/palette-mobile"
+import { Spacer, Flex, Image } from "@artsy/palette-mobile"
 import { AutosuggestResult } from "app/Components/AutosuggestResults/AutosuggestResults"
-import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView"
 import { ResultWithHighlight } from "app/Scenes/Search/components/ResultWithHighlight"
 import { TouchableWithoutFeedback } from "react-native"
 
@@ -19,14 +18,16 @@ export const ArtistAutosuggestRow: React.FC<Props> = ({ result, highlight, onRes
       testID={`artist-suggestion-${result.internalID}`}
     >
       <Flex height={IMAGE_SIZE} flexDirection="row" alignItems="center">
-        <OpaqueImageView
-          imageURL={result.imageUrl}
-          width={IMAGE_SIZE}
-          height={IMAGE_SIZE}
-          style={{
-            overflow: "hidden",
-          }}
-        />
+        {!!result.imageUrl && (
+          <Image
+            src={result.imageUrl}
+            width={IMAGE_SIZE}
+            height={IMAGE_SIZE}
+            style={{
+              overflow: "hidden",
+            }}
+          />
+        )}
         <Spacer x={1} />
         <Flex flex={1}>
           {!!result.displayLabel && (

src/app/Components/ArtworkLists/components/ArtworkListImage.tsx

@@ -1,6 +1,5 @@
-import { Flex, FlexProps } from "@artsy/palette-mobile"
+import { Flex, FlexProps, Image } from "@artsy/palette-mobile"
 import { ArtworkListNoImage } from "app/Components/ArtworkLists/components/ArtworkListNoImage"
-import { OpaqueImageView } from "app/Components/OpaqueImageView2"
 import { FC } from "react"
 
 export interface ArtworkListImageProps extends FlexProps {
@@ -18,7 +17,7 @@ export const ArtworkListImage: FC<ArtworkListImageProps> = ({
   return (
     <Flex bg="black5" {...rest}>
       {imageURL ? (
-        <OpaqueImageView imageURL={imageURL} width={size} height={size} useRawURL={true} />
+        <Image src={imageURL} width={size} height={size} performResize={false} />
       ) : (
         <ArtworkListNoImage
           width={size}

src/app/Components/Cards/MediumCard.tsx

@@ -1,5 +1,4 @@
-import { Spacer, Flex, Box, BoxProps, useTheme, Text } from "@artsy/palette-mobile"
-import { OpaqueImageView as NewOpaqueImageView } from "app/Components/OpaqueImageView2"
+import { Spacer, Flex, Box, BoxProps, useTheme, Text, Image } from "@artsy/palette-mobile"
 import LinearGradient from "react-native-linear-gradient"
 import { CardTag, CardTagProps } from "./CardTag"
 
@@ -30,11 +29,7 @@ export const MediumCard: React.FC<MediumCardProps> = ({ image, title, subtitle,
       {...rest}
     >
       <Flex flex={2} backgroundColor="black10">
-        <NewOpaqueImageView
-          imageURL={image}
-          height={MEDIUM_CARD_HEIGHT}
-          width={MEDIUM_CARD_WIDTH}
-        />
+        <Image src={image} height={MEDIUM_CARD_HEIGHT} width={MEDIUM_CARD_WIDTH} />
       </Flex>
       <LinearGradient
         colors={["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 1)"]}

src/app/Components/Lists/SavedItemRow.tsx

@@ -1,5 +1,4 @@
-import { Spacer, Flex, useColor, Text, Touchable } from "@artsy/palette-mobile"
-import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView"
+import { Spacer, Flex, useColor, Text, Touchable, Image } from "@artsy/palette-mobile"
 import { navigate } from "app/system/navigation/navigate"
 
 interface SavedItemRowProps {
@@ -37,7 +36,7 @@ export const SavedItemRow: React.FC<SavedItemRowProps> = ({
             borderRadius={square_image ? 2 : size / 2}
             overflow="hidden"
           >
-            <OpaqueImageView imageURL={imageURL} width={size} height={size} />
+            {!!imageURL && <Image src={imageURL} width={size} height={size} />}
           </Flex>
           <Spacer x={2} />
           <Text variant="sm" weight="medium">

src/app/Components/Lists/ShowItemRow.tsx

@@ -1,9 +1,8 @@
-import { Flex, Box, ClassTheme, Text, Button, Touchable } from "@artsy/palette-mobile"
+import { Flex, Box, ClassTheme, Text, Button, Touchable, Image } from "@artsy/palette-mobile"
 import { themeGet } from "@styled-system/theme-get"
 import { ShowItemRowMutation } from "__generated__/ShowItemRowMutation.graphql"
 import { ShowItemRow_show$data } from "__generated__/ShowItemRow_show.graphql"
 import { Pin } from "app/Components/Icons/Pin"
-import OpaqueImageView from "app/Components/OpaqueImageView/OpaqueImageView"
 import { exhibitionDates } from "app/Scenes/Map/exhibitionPeriodParser"
 import { navigate } from "app/system/navigation/navigate"
 import { hrefForPartialShow } from "app/utils/router"
@@ -131,7 +130,7 @@ export class ShowItemRow extends React.Component<Props, State> {
               </DefaultImageContainer>
             ) : (
               <DefaultImageContainer>
-                <OpaqueImageView width={62} height={62} imageURL={imageURL} />
+                <Image width={62} height={62} src={imageURL} />
               </DefaultImageContainer>
             )}
             <Flex flexDirection="column" flexGrow={1} width={165} mr={1}>