Try out more apng loading

src/components/Account.tsx

@@ -36,7 +36,7 @@ const ComponentAccount: React.FC<Props> = ({
       onPress={customOnPress || onPress}
     >
       <GracefullyImage
-        uri={{ original: account.avatar_static }}
+        uri={{ original: account.avatar, static: account.avatar_static }}
         style={styles.itemAccountAvatar}
       />
       <View>

src/components/GracefullyImage.tsx

@@ -1,3 +1,4 @@
+import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo, useState } from 'react'
 import {
@@ -23,7 +24,7 @@ export interface Props {
   accessibilityHint?: AccessibilityProps['accessibilityHint']
 
   hidden?: boolean
-  uri: { preview?: string; original?: string; remote?: string }
+  uri: { preview?: string; original?: string; remote?: string; static?: string }
   blurhash?: string
   dimension?: { width: number; height: number }
   onPress?: () => void
@@ -51,6 +52,7 @@ const GracefullyImage = React.memo(
     imageStyle,
     setImageDimensions
   }: Props) => {
+    const { reduceMotionEnabled } = useAccessibility()
     const { colors } = useTheme()
     const [originalFailed, setOriginalFailed] = useState(false)
     const [imageLoaded, setImageLoaded] = useState(false)
@@ -59,7 +61,9 @@ const GracefullyImage = React.memo(
       if (originalFailed) {
         return { uri: uri.remote || undefined }
       } else {
-        return { uri: uri.original }
+        return {
+          uri: reduceMotionEnabled && uri.static ? uri.static : uri.original
+        }
       }
     }, [originalFailed])
 

src/components/Timeline/Conversation.tsx

@@ -32,7 +32,7 @@ const Avatars: React.FC<{ accounts: Mastodon.Account[] }> = ({ accounts }) => {
       {accounts.slice(0, 4).map(account => (
         <GracefullyImage
           key={account.id}
-          uri={{ original: account.avatar_static }}
+          uri={{ original: account.avatar, static: account.avatar_static }}
           dimension={{
             width: StyleConstants.Avatar.M,
             height:

src/components/Timeline/Shared/Avatar.tsx

@@ -16,9 +16,8 @@ export interface Props {
 const TimelineAvatar = React.memo(
   ({ queryKey, account, highlighted }: Props) => {
     const { t } = useTranslation('componentTimeline')
-    const navigation = useNavigation<
+    const navigation =
-      StackNavigationProp<Nav.TabLocalStackParamList>
+      useNavigation<StackNavigationProp<Nav.TabLocalStackParamList>>()
-    >()
     // Need to fix go back root
     const onPress = useCallback(() => {
       analytics('timeline_shared_avatar_press', {
@@ -38,7 +37,7 @@ const TimelineAvatar = React.memo(
           })
         })}
         onPress={onPress}
-        uri={{ original: account.avatar_static }}
+        uri={{ original: account.avatar, static: account.avatar_static }}
         dimension={{
           width: StyleConstants.Avatar.M,
           height: StyleConstants.Avatar.M

src/screens/Tabs/Shared/Account/Information/Avatar.tsx

@@ -3,7 +3,6 @@ import Button from '@components/Button'
 import GracefullyImage from '@components/GracefullyImage'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
-import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { StyleConstants } from '@utils/styles/constants'
 import React from 'react'
@@ -20,11 +19,8 @@ const AccountInformationAvatar: React.FC<Props> = ({
   myInfo,
   edit
 }) => {
-  const navigation = useNavigation<
+  const navigation =
-    StackNavigationProp<TabLocalStackParamList>
+    useNavigation<StackNavigationProp<TabLocalStackParamList>>()
-  >()
-  const { reduceMotionEnabled } = useAccessibility()
-
   return (
     <Pressable
       disabled={!myInfo}
@@ -37,11 +33,7 @@ const AccountInformationAvatar: React.FC<Props> = ({
       <GracefullyImage
         key={account?.avatar}
         style={styles.image}
-        uri={{
+        uri={{ original: account?.avatar, static: account?.avatar_static }}
-          original: reduceMotionEnabled
-            ? account?.avatar_static
-            : account?.avatar
-        }}
       />
       {edit ? (
         <View