From 7a12792393362b70b2cff0bc9b31762519860c21 Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Mon, 19 Apr 2021 17:15:52 +0200
Subject: [PATCH] Fixed #107

---
 src/@types/react-navigation.d.ts              |  1 +
 src/components/GracefullyImage.tsx            | 23 ++++++++++++++-----
 src/components/Timeline/Shared/Attachment.tsx |  2 ++
 .../components/ImageItem.android.tsx          |  2 +-
 .../ImageViewer/components/ImageItem.ios.tsx  |  2 +-
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/@types/react-navigation.d.ts b/src/@types/react-navigation.d.ts
index acf59127..f90844f0 100644
--- a/src/@types/react-navigation.d.ts
+++ b/src/@types/react-navigation.d.ts
@@ -57,6 +57,7 @@ declare namespace Nav {
     'Screen-ImagesViewer': {
       imageUrls: {
         id: Mastodon.Attachment['id']
+        preview_url: Mastodon.AttachmentImage['preview_url']
         url: Mastodon.AttachmentImage['url']
         remote_url?: Mastodon.AttachmentImage['remote_url']
         blurhash: Mastodon.AttachmentImage['blurhash']
diff --git a/src/components/GracefullyImage.tsx b/src/components/GracefullyImage.tsx
index 37cac47f..dcacb0dd 100644
--- a/src/components/GracefullyImage.tsx
+++ b/src/components/GracefullyImage.tsx
@@ -81,13 +81,17 @@ const GracefullyImage = React.memo(
 
     const previewView = useMemo(
       () =>
-        uri.preview && !imageLoaded ? (
+        // Android flickrs between transition, thus keep showing the preview image
+        uri.preview ? (
           <Image
             source={{ uri: uri.preview }}
-            style={[{ flex: 1 }, imageStyle]}
+            style={[
+              styles.placeholder,
+              { backgroundColor: theme.shimmerDefault }
+            ]}
           />
         ) : null,
-      [imageLoaded]
+      []
     )
     const originalView = useMemo(
       () => (
@@ -104,12 +108,19 @@ const GracefullyImage = React.memo(
       if (hidden || !imageLoaded) {
         if (blurhash) {
           return (
-            <Blurhash decodeAsync blurhash={blurhash} style={styles.blurhash} />
+            <Blurhash
+              decodeAsync
+              blurhash={blurhash}
+              style={styles.placeholder}
+            />
           )
         } else {
           return (
             <View
-              style={[styles.blurhash, { backgroundColor: theme.disabled }]}
+              style={[
+                styles.placeholder,
+                { backgroundColor: theme.shimmerDefault }
+              ]}
             />
           )
         }
@@ -146,7 +157,7 @@ const GracefullyImage = React.memo(
 )
 
 const styles = StyleSheet.create({
-  blurhash: {
+  placeholder: {
     width: '100%',
     height: '100%',
     position: 'absolute'
diff --git a/src/components/Timeline/Shared/Attachment.tsx b/src/components/Timeline/Shared/Attachment.tsx
index 0b91ae47..e6925ae5 100644
--- a/src/components/Timeline/Shared/Attachment.tsx
+++ b/src/components/Timeline/Shared/Attachment.tsx
@@ -47,6 +47,7 @@ const TimelineAttachment = React.memo(
             case 'image':
               imageUrls.push({
                 id: attachment.id,
+                preview_url: attachment.preview_url,
                 url: attachment.url,
                 remote_url: attachment.remote_url,
                 blurhash: attachment.blurhash,
@@ -107,6 +108,7 @@ const TimelineAttachment = React.memo(
               ) {
                 imageUrls.push({
                   id: attachment.id,
+                  preview_url: attachment.preview_url,
                   url: attachment.url,
                   remote_url: attachment.remote_url,
                   blurhash: attachment.blurhash,
diff --git a/src/screens/ImageViewer/components/ImageItem.android.tsx b/src/screens/ImageViewer/components/ImageItem.android.tsx
index e5cb50b6..3974861b 100644
--- a/src/screens/ImageViewer/components/ImageItem.android.tsx
+++ b/src/screens/ImageViewer/components/ImageItem.android.tsx
@@ -90,10 +90,10 @@ const ImageItem = ({
         children={
           <GracefullyImage
             uri={{
+              preview: imageSrc.preview_url,
               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 92b3486c..971888f9 100644
--- a/src/screens/ImageViewer/components/ImageItem.ios.tsx
+++ b/src/screens/ImageViewer/components/ImageItem.ios.tsx
@@ -145,10 +145,10 @@ const ImageItem = ({
               children={
                 <GracefullyImage
                   uri={{
+                    preview: imageSrc.preview_url,
                     original: imageSrc.url,
                     remote: imageSrc.remote_url
                   }}
-                  blurhash={imageSrc.blurhash}
                   {...((!imageSrc.width || !imageSrc.height) && {
                     setImageDimensions
                   })}