Faster image loading transition

src/components/Emojis/List.tsx

@@ -131,7 +131,7 @@ const EmojisList = () => {
             >
               <FastImage
                 enterTransition='fadeIn'
-                transitionDuration={100}
+                transitionDuration={60}
                 accessibilityLabel={t('common:customEmoji.accessibilityLabel', {
                   emoji: emoji.shortcode
                 })}

src/components/GracefullyImage.tsx

@@ -88,21 +88,21 @@ const GracefullyImage = ({
       {...(onPress ? { accessibilityRole: 'imagebutton' } : { accessibilityRole: 'image' })}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
-      style={[style, dimension, { backgroundColor: colors.shimmerDefault }]}
+      style={[style, dimension]}
       {...(onPress ? (hidden ? { disabled: true } : { onPress }) : { disabled: true })}
     >
       {uri.preview && !imageLoaded ? (
         <FastImage
           source={connectMedia({ uri: uri.preview })}
           enterTransition='fadeIn'
-          transitionDuration={100}
-          style={[styles.placeholder, { backgroundColor: colors.shimmerDefault }]}
+          transitionDuration={60}
+          style={[styles.placeholder]}
         />
       ) : null}
       <FastImage
         source={connectMedia(source)}
         enterTransition='fadeIn'
-        transitionDuration={100}
+        transitionDuration={60}
         style={[{ flex: 1 }, imageStyle]}
         onLoad={() => {
           setImageLoaded(true)

src/screens/Compose/Root/Footer/Attachments.tsx

@@ -106,7 +106,7 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
       >
         <FastImage
           enterTransition='fadeIn'
-          transitionDuration={100}
+          transitionDuration={60}
           style={{ width: '100%', height: '100%' }}
           source={
             item.local?.thumbnail