Image viewer use blurhash as loading placeholder

src/@types/react-navigation.d.ts

@@ -58,9 +58,10 @@ declare namespace Nav {
       imageUrls: {
         id: Mastodon.Attachment['id']
         url: Mastodon.AttachmentImage['url']
+        remote_url?: Mastodon.AttachmentImage['remote_url']
+        blurhash: Mastodon.AttachmentImage['blurhash']
         width?: number
         height?: number
-        remote_url?: Mastodon.AttachmentImage['remote_url']
       }[]
       id: Mastodon.Attachment['id']
     }

src/components/GracefullyImage.tsx

@@ -102,11 +102,7 @@ const GracefullyImage = React.memo(
 
     return (
       <Pressable
-        style={[
-          style,
-          dimension,
-          { backgroundColor: theme.backgroundOverlayDefault }
-        ]}
+        style={[style, dimension, { backgroundColor: theme.shimmerDefault }]}
         {...(onPress
           ? hidden
             ? { disabled: true }
@@ -130,9 +126,7 @@ const styles = StyleSheet.create({
   blurhash: {
     width: '100%',
     height: '100%',
-    position: 'absolute',
-    top: StyleConstants.Spacing.XS / 2,
-    left: StyleConstants.Spacing.XS / 2
+    position: 'absolute'
   }
 })
 

src/components/Timeline/Shared/Attachment.tsx

@@ -49,6 +49,7 @@ const TimelineAttachment = React.memo(
                 id: attachment.id,
                 url: attachment.url,
                 remote_url: attachment.remote_url,
+                blurhash: attachment.blurhash,
                 width: attachment.meta?.original?.width,
                 height: attachment.meta?.original?.height
               })

src/screens/ImageViewer/components/ImageItem.android.tsx

@@ -93,6 +93,7 @@ const ImageItem = ({
               original: imageSrc.url,
               remote: imageSrc.remote_url
             }}
+            blurhash={imageSrc.blurhash}
             {...((!imageSrc.width || !imageSrc.height) && {
               setImageDimensions
             })}

src/screens/ImageViewer/components/ImageItem.ios.tsx

@@ -148,6 +148,7 @@ const ImageItem = ({
                     original: imageSrc.url,
                     remote: imageSrc.remote_url
                   }}
+                  blurhash={imageSrc.blurhash}
                   {...((!imageSrc.width || !imageSrc.height) && {
                     setImageDimensions
                   })}