Show almost-instant preview when opening lightbox (#6000)

* Plumb thumbUri down to the lightbox

* Remove onLoad tracking from lightbox

* Hook up placeholder URI to the image

* Fix NaN causing crash on double tap while offline

* Protect against NaNs in the future

1 files changed, 11 insertions, 10 deletions

diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
index 814e39fa9..d4ce0f735 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -34,7 +34,6 @@ const SCREEN = {
 const MIN_DOUBLE_TAP_SCALE = 2
 const MAX_ORIGINAL_IMAGE_ZOOM = 2
 
-const AnimatedImage = Animated.createAnimatedComponent(Image)
 const initialTransform = createTransform()
 
 type Props = {
@@ -53,7 +52,6 @@ const ImageItem = ({
   isScrollViewBeingDragged,
 }: Props) => {
   const [isScaled, setIsScaled] = useState(false)
-  const [isLoaded, setIsLoaded] = useState(false)
   const imageDimensions = useImageDimensions(imageSrc)
   const committedTransform = useSharedValue(initialTransform)
   const panTranslation = useSharedValue({x: 0, y: 0})
@@ -313,20 +311,23 @@ const ImageItem = ({
         singleTap,
       )
 
-  const isLoading = !isLoaded || !imageDimensions
   return (
-    <Animated.View ref={containerRef} style={styles.container}>
-      {isLoading && (
-        <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
-      )}
+    <Animated.View
+      ref={containerRef}
+      // Necessary to make opacity work for both children together.
+      renderToHardwareTextureAndroid
+      style={[styles.container, animatedStyle]}>
+      <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
       <GestureDetector gesture={composedGesture}>
-        <AnimatedImage
+        <Image
           contentFit="contain"
           source={{uri: imageSrc.uri}}
-          style={[styles.image, animatedStyle]}
+          placeholderContentFit="contain"
+          placeholder={{uri: imageSrc.thumbUri}}
+          style={styles.image}
           accessibilityLabel={imageSrc.alt}
           accessibilityHint=""
-          onLoad={() => setIsLoaded(true)}
+          accessibilityIgnoresInvertColors
           cachePolicy="memory"
         />
       </GestureDetector>