From 516bb1e67d21e8b714e32ad00f9bda9f7d818d5c Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Sat, 27 Mar 2021 00:17:34 +0100
Subject: [PATCH] Image viewer use blurhash as loading placeholder

---
 src/@types/react-navigation.d.ts                       |  3 ++-
 src/components/GracefullyImage.tsx                     | 10 ++--------
 src/components/Timeline/Shared/Attachment.tsx          |  1 +
 .../ImageViewer/components/ImageItem.android.tsx       |  1 +
 src/screens/ImageViewer/components/ImageItem.ios.tsx   |  1 +
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/@types/react-navigation.d.ts b/src/@types/react-navigation.d.ts
index 33834f60..acf59127 100644
--- a/src/@types/react-navigation.d.ts
+++ b/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']
     }
diff --git a/src/components/GracefullyImage.tsx b/src/components/GracefullyImage.tsx
index 04ad5270..ed2deccd 100644
--- a/src/components/GracefullyImage.tsx
+++ b/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'
   }
 })
 
diff --git a/src/components/Timeline/Shared/Attachment.tsx b/src/components/Timeline/Shared/Attachment.tsx
index 3dd10327..fc004d24 100644
--- a/src/components/Timeline/Shared/Attachment.tsx
+++ b/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
               })
diff --git a/src/screens/ImageViewer/components/ImageItem.android.tsx b/src/screens/ImageViewer/components/ImageItem.android.tsx
index 20a611af..069dc494 100644
--- a/src/screens/ImageViewer/components/ImageItem.android.tsx
+++ b/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
             })}
diff --git a/src/screens/ImageViewer/components/ImageItem.ios.tsx b/src/screens/ImageViewer/components/ImageItem.ios.tsx
index b21f7aa2..92b3486c 100644
--- a/src/screens/ImageViewer/components/ImageItem.ios.tsx
+++ b/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
                   })}