Preparing for CI test

src/components/GracefullyImage.tsx

@@ -1,14 +1,8 @@
 import { StyleConstants } from '@utils/styles/constants'
-import React, { useCallback, useState } from 'react'
-import {
-  ImageStyle,
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  ViewStyle
-} from 'react-native'
+import React, { useCallback, useMemo, useState } from 'react'
+import { Pressable, StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import { Blurhash } from 'react-native-blurhash'
-import FastImage from 'react-native-fast-image'
+import FastImage, { ImageStyle } from 'react-native-fast-image'
 import { SharedElement } from 'react-navigation-shared-element'
 import { useTheme } from '@utils/styles/ThemeManager'
 
@@ -23,70 +17,120 @@ export interface Props {
   imageStyle?: StyleProp<ImageStyle>
 }
 
-const GracefullyImage: React.FC<Props> = ({
-  sharedElement,
-  hidden = false,
-  uri,
-  blurhash,
-  dimension,
-  onPress,
-  style,
-  imageStyle
-}) => {
-  const { mode, theme } = useTheme()
-  const [imageLoaded, setImageLoaded] = useState(false)
-
-  const children = useCallback(() => {
-    return (
-      <>
-        {sharedElement ? (
-          <SharedElement id={`image.${sharedElement}`} style={[styles.image]}>
-            <FastImage
-              source={{ uri: uri.preview || uri.original || uri.remote }}
-              style={[styles.image, imageStyle]}
-              onLoad={() => setImageLoaded(true)}
-            />
-          </SharedElement>
-        ) : (
-          <FastImage
-            source={{ uri: uri.preview || uri.original || uri.remote }}
-            style={[styles.image, imageStyle]}
-            onLoad={() => setImageLoaded(true)}
-          />
-        )}
-        {blurhash && (hidden || !imageLoaded) ? (
-          <Blurhash
-            decodeAsync
-            blurhash={blurhash}
-            style={{
-              width: '100%',
-              height: '100%',
-              position: 'absolute',
-              top: StyleConstants.Spacing.XS / 2,
-              left: StyleConstants.Spacing.XS / 2
-            }}
-          />
-        ) : null}
-      </>
+const GracefullyImage = React.memo(
+  ({
+    sharedElement,
+    hidden = false,
+    uri,
+    blurhash,
+    dimension,
+    onPress,
+    style,
+    imageStyle
+  }: Props) => {
+    const { mode, theme } = useTheme()
+    const [previewLoaded, setPreviewLoaded] = useState(
+      uri.preview ? false : true
     )
-  }, [hidden, imageLoaded, mode, uri])
+    const [originalLoaded, setOriginalLoaded] = useState(false)
+    const [originalFailed, setOriginalFailed] = useState(false)
+    const [remoteLoaded, setRemoteLoaded] = useState(uri.remote ? false : true)
 
-  return (
-    <Pressable
-      children={children}
-      style={[
-        style,
-        { backgroundColor: theme.shimmerDefault },
-        dimension && { ...dimension }
-      ]}
-      {...(onPress
-        ? hidden
-          ? { disabled: true }
-          : { onPress }
-        : { disabled: true })}
-    />
-  )
-}
+    const sourceUri = useMemo(() => {
+      if (previewLoaded) {
+        if (originalFailed) {
+          return uri.remote
+        } else {
+          return uri.original
+        }
+      } else {
+        return uri.preview
+      }
+    }, [previewLoaded, originalLoaded, originalFailed, remoteLoaded])
+    const onLoad = useCallback(() => {
+      if (previewLoaded) {
+        if (originalFailed) {
+          return setRemoteLoaded(true)
+        } else {
+          return setOriginalLoaded(true)
+        }
+      } else {
+        return setPreviewLoaded(true)
+      }
+    }, [previewLoaded, originalLoaded, originalFailed, remoteLoaded])
+    const onError = useCallback(() => {
+      if (previewLoaded) {
+        if (originalFailed) {
+          return
+        } else {
+          return setOriginalFailed(true)
+        }
+      } else {
+        return
+      }
+    }, [previewLoaded, originalLoaded, originalFailed, remoteLoaded])
+
+    const children = useCallback(() => {
+      return (
+        <>
+          {sharedElement ? (
+            <SharedElement id={`image.${sharedElement}`} style={[styles.image]}>
+              <FastImage
+                source={{ uri: sourceUri }}
+                style={[styles.image, imageStyle]}
+                onLoad={onLoad}
+                onError={onError}
+              />
+            </SharedElement>
+          ) : (
+            <FastImage
+              source={{ uri: sourceUri }}
+              style={[styles.image, imageStyle]}
+              onLoad={onLoad}
+              onError={onError}
+            />
+          )}
+          {blurhash &&
+          (hidden || !(previewLoaded || originalLoaded || remoteLoaded)) ? (
+            <Blurhash
+              decodeAsync
+              blurhash={blurhash}
+              style={{
+                width: '100%',
+                height: '100%',
+                position: 'absolute',
+                top: StyleConstants.Spacing.XS / 2,
+                left: StyleConstants.Spacing.XS / 2
+              }}
+            />
+          ) : null}
+        </>
+      )
+    }, [hidden, previewLoaded, originalLoaded, remoteLoaded, mode, uri])
+
+    return (
+      <Pressable
+        children={children}
+        style={[
+          style,
+          { backgroundColor: theme.shimmerDefault },
+          dimension && { ...dimension }
+        ]}
+        {...(onPress
+          ? hidden
+            ? { disabled: true }
+            : { onPress }
+          : { disabled: true })}
+      />
+    )
+  },
+  (prev, next) => {
+    let skipUpdate = true
+    skipUpdate = prev.hidden === next.hidden
+    skipUpdate = prev.uri.original === next.uri.original
+    return false
+  }
+)
 
 const styles = StyleSheet.create({
   image: {

src/components/Timelines/Timeline/Shared/Actions.tsx

@@ -202,6 +202,7 @@ const TimelineActions: React.FC<Props> = ({
               : iconColorAction(status.reblogged)
           }
           size={StyleConstants.Font.Size.L}
+          strokeWidth={status.reblogged ? 3 : undefined}
         />
         {status.reblogs_count > 0 && (
           <Text
@@ -225,6 +226,7 @@ const TimelineActions: React.FC<Props> = ({
           name='Heart'
           color={iconColorAction(status.favourited)}
           size={StyleConstants.Font.Size.L}
+          strokeWidth={status.favourited ? 3 : undefined}
         />
         {status.favourites_count > 0 && (
           <Text
@@ -248,6 +250,7 @@ const TimelineActions: React.FC<Props> = ({
         name='Bookmark'
         color={iconColorAction(status.bookmarked)}
         size={StyleConstants.Font.Size.L}
+        strokeWidth={status.bookmarked ? 3 : undefined}
       />
     ),
     [status.bookmarked]

src/components/Timelines/Timeline/Shared/Attachment.tsx

@@ -114,7 +114,7 @@ const TimelineAttachment: React.FC<Props> = ({ status }) => {
 
   return (
     <View>
-      <View style={styles.container}>{attachments}</View>
+      <View style={styles.container} children={attachments} />
 
       {status.sensitive &&
         (sensitiveShown ? (

src/components/Timelines/Timeline/Shared/Attachment/Audio.tsx

@@ -1,3 +1,4 @@
+import analytics from '@components/analytics'
 import Button from '@components/Button'
 import GracefullyImage from '@components/GracefullyImage'
 import { Slider } from '@sharcoux/slider'
@@ -8,7 +9,6 @@ import React, { useCallback, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Blurhash } from 'react-native-blurhash'
 import attachmentAspectRatio from './aspectRatio'
-import analytics from '@components/analytics'
 
 export interface Props {
   total: number

src/components/Timelines/Timeline/Shared/Card.tsx

@@ -27,6 +27,7 @@ const TimelineCard: React.FC<Props> = ({ card }) => {
           uri={{ original: card.image }}
           blurhash={card.blurhash}
           style={styles.left}
+          imageStyle={styles.image}
         />
       )}
       <View style={styles.right}>
@@ -64,15 +65,13 @@ const styles = StyleSheet.create({
     height: StyleConstants.Font.LineHeight.M * 5,
     marginTop: StyleConstants.Spacing.M,
     borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 6
+    borderRadius: 6,
+    overflow: 'hidden'
   },
   left: {
-    width: StyleConstants.Font.LineHeight.M * 5,
-    height: StyleConstants.Font.LineHeight.M * 5
+    flexBasis: StyleConstants.Font.LineHeight.M * 5
   },
   image: {
-    width: '100%',
-    height: '100%',
     borderTopLeftRadius: 6,
     borderBottomLeftRadius: 6
   },