From d2eb7156a4ffd3c9b1a1f560f05c5125b8db1ce7 Mon Sep 17 00:00:00 2001
From: xmflsct <me@xmflsct.com>
Date: Fri, 17 Feb 2023 18:58:43 +0100
Subject: [PATCH 1/2] Try faster append toots

---
 src/components/Timeline/Refresh.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Timeline/Refresh.tsx b/src/components/Timeline/Refresh.tsx
index 44216d66..bc134481 100644
--- a/src/components/Timeline/Refresh.tsx
+++ b/src/components/Timeline/Refresh.tsx
@@ -167,11 +167,11 @@ const TimelineRefresh: React.FC<Props> = ({
 
           prevCache.current = res.body.slice(0, -PREV_PER_BATCH)
           return {
+            ...old,
             pages: [
               { ...res, body: res.body.slice(-PREV_PER_BATCH) },
               ...old.pages.slice(0, keepPagesCount)
-            ],
-            pageParams: [{}, ...old.pageParams.slice(0, keepPagesCount)]
+            ]
           }
         })
 
@@ -189,7 +189,7 @@ const TimelineRefresh: React.FC<Props> = ({
             flRef.current?.scrollToOffset({ offset: scrollY.value - 15, animated: true })
           }
 
-          await new Promise<void>(promise => setTimeout(promise, 64))
+          await new Promise<void>(promise => setTimeout(promise, 16))
           queryClient.setQueryData<
             InfiniteData<
               PagedResponse<(Mastodon.Status | Mastodon.Notification | Mastodon.Conversation)[]>

From 73e4bdb29076ae994bd5c461788952e05fbf60e1 Mon Sep 17 00:00:00 2001
From: xmflsct <me@xmflsct.com>
Date: Fri, 17 Feb 2023 22:19:04 +0100
Subject: [PATCH 2/2] Prevent image loading flashing in conversation

---
 src/components/GracefullyImage.tsx                        | 4 +++-
 src/components/Timeline/Shared/Attachment/Audio.tsx       | 6 +++++-
 src/components/Timeline/Shared/Attachment/Image.tsx       | 5 ++++-
 src/components/Timeline/Shared/Attachment/Unsupported.tsx | 6 +++++-
 src/components/Timeline/Shared/Attachment/Video.tsx       | 6 +++++-
 src/components/Timeline/Shared/Avatar.tsx                 | 3 ++-
 src/components/Timeline/Shared/Card.tsx                   | 3 ++-
 7 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/GracefullyImage.tsx b/src/components/GracefullyImage.tsx
index fb95f5b0..53d046ff 100644
--- a/src/components/GracefullyImage.tsx
+++ b/src/components/GracefullyImage.tsx
@@ -23,6 +23,7 @@ export interface Props {
   imageStyle?: ImageStyle
 
   dim?: boolean
+  withoutTransition?: boolean
   enableLiveTextInteraction?: boolean
 }
 
@@ -36,6 +37,7 @@ const GracefullyImage = ({
   style,
   imageStyle,
   dim,
+  withoutTransition = false,
   enableLiveTextInteraction = false
 }: Props) => {
   const { reduceMotionEnabled } = useAccessibility()
@@ -59,7 +61,7 @@ const GracefullyImage = ({
         placeholderContentFit='cover'
         placeholder={sources.blurhash || connectMedia(sources.preview)}
         source={hidden ? undefined : connectMedia(source)}
-        transition={{ duration: 80 }}
+        {...((!withoutTransition || !reduceMotionEnabled) && { transition: { duration: 120 } })}
         style={{ flex: 1, ...imageStyle }}
         onError={() => {
           if (
diff --git a/src/components/Timeline/Shared/Attachment/Audio.tsx b/src/components/Timeline/Shared/Attachment/Audio.tsx
index 4e176df8..ca75708f 100644
--- a/src/components/Timeline/Shared/Attachment/Audio.tsx
+++ b/src/components/Timeline/Shared/Attachment/Audio.tsx
@@ -5,8 +5,9 @@ import { connectMedia } from '@utils/api/helpers/connect'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { Audio } from 'expo-av'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { AppState, AppStateStatus, View } from 'react-native'
+import StatusContext from '../Context'
 import AttachmentAltText from './AltText'
 import { aspectRatio } from './dimensions'
 
@@ -18,6 +19,7 @@ export interface Props {
 }
 
 const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio }) => {
+  const { inThread } = useContext(StatusContext)
   const { colors } = useTheme()
 
   const [audioPlayer, setAudioPlayer] = useState<Audio.Sound>()
@@ -88,6 +90,7 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
                 height: '100%'
               }}
               dim
+              withoutTransition={inThread}
             />
           ) : null
         ) : (
@@ -100,6 +103,7 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
                 }}
                 style={{ position: 'absolute', width: '100%', height: '100%' }}
                 dim
+                withoutTransition={inThread}
               />
             ) : null}
             <Button
diff --git a/src/components/Timeline/Shared/Attachment/Image.tsx b/src/components/Timeline/Shared/Attachment/Image.tsx
index f609b229..d044fe61 100644
--- a/src/components/Timeline/Shared/Attachment/Image.tsx
+++ b/src/components/Timeline/Shared/Attachment/Image.tsx
@@ -1,8 +1,9 @@
 import GracefullyImage from '@components/GracefullyImage'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React from 'react'
+import React, { useContext } from 'react'
 import { View } from 'react-native'
+import StatusContext from '../Context'
 import AttachmentAltText from './AltText'
 import { aspectRatio } from './dimensions'
 
@@ -21,6 +22,7 @@ const AttachmentImage = ({
   image,
   navigateToImagesViewer
 }: Props) => {
+  const { inThread } = useContext(StatusContext)
   const { colors } = useTheme()
 
   return (
@@ -45,6 +47,7 @@ const AttachmentImage = ({
         onPress={() => navigateToImagesViewer(image.id)}
         style={{ aspectRatio: aspectRatio({ total, index, ...image.meta?.original }) }}
         dim
+        withoutTransition={inThread}
       />
       <AttachmentAltText sensitiveShown={sensitiveShown} text={image.description} />
     </View>
diff --git a/src/components/Timeline/Shared/Attachment/Unsupported.tsx b/src/components/Timeline/Shared/Attachment/Unsupported.tsx
index 492ff5be..a494e6da 100644
--- a/src/components/Timeline/Shared/Attachment/Unsupported.tsx
+++ b/src/components/Timeline/Shared/Attachment/Unsupported.tsx
@@ -4,9 +4,10 @@ import openLink from '@components/openLink'
 import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React from 'react'
+import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
+import StatusContext from '../Context'
 import AttachmentAltText from './AltText'
 import { aspectRatio } from './dimensions'
 
@@ -18,6 +19,7 @@ export interface Props {
 }
 
 const AttachmentUnsupported: React.FC<Props> = ({ total, index, sensitiveShown, attachment }) => {
+  const { inThread } = useContext(StatusContext)
   const { t } = useTranslation('componentTimeline')
   const { colors } = useTheme()
 
@@ -36,6 +38,8 @@ const AttachmentUnsupported: React.FC<Props> = ({ total, index, sensitiveShown,
         <GracefullyImage
           sources={{ blurhash: attachment.blurhash }}
           style={{ position: 'absolute', width: '100%', height: '100%' }}
+          dim
+          withoutTransition={inThread}
         />
       ) : null}
       {!sensitiveShown ? (
diff --git a/src/components/Timeline/Shared/Attachment/Video.tsx b/src/components/Timeline/Shared/Attachment/Video.tsx
index 49480a96..72064ae6 100644
--- a/src/components/Timeline/Shared/Attachment/Video.tsx
+++ b/src/components/Timeline/Shared/Attachment/Video.tsx
@@ -8,8 +8,9 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
 import { Platform } from 'expo-modules-core'
 import * as ScreenOrientation from 'expo-screen-orientation'
-import React, { useRef, useState } from 'react'
+import React, { useContext, useRef, useState } from 'react'
 import { Pressable, View } from 'react-native'
+import StatusContext from '../Context'
 import AttachmentAltText from './AltText'
 import { aspectRatio } from './dimensions'
 
@@ -28,6 +29,7 @@ const AttachmentVideo: React.FC<Props> = ({
   video,
   gifv = false
 }) => {
+  const { inThread } = useContext(StatusContext)
   const { colors } = useTheme()
   const { reduceMotionEnabled } = useAccessibility()
   const [shouldAutoplayGifv] = useGlobalStorage.boolean('app.auto_play_gifv')
@@ -127,6 +129,8 @@ const AttachmentVideo: React.FC<Props> = ({
             <GracefullyImage
               sources={{ blurhash: video.blurhash }}
               style={{ width: '100%', height: '100%' }}
+              dim
+              withoutTransition={inThread}
             />
           ) : null
         ) : !gifv || (gifv && (reduceMotionEnabled || !shouldAutoplayGifv)) ? (
diff --git a/src/components/Timeline/Shared/Avatar.tsx b/src/components/Timeline/Shared/Avatar.tsx
index 55aa6ed0..05c63cd1 100644
--- a/src/components/Timeline/Shared/Avatar.tsx
+++ b/src/components/Timeline/Shared/Avatar.tsx
@@ -12,7 +12,7 @@ export interface Props {
 }
 
 const TimelineAvatar: React.FC<Props> = ({ account }) => {
-  const { status, highlighted, disableDetails, disableOnPress, isConversation } =
+  const { status, highlighted, disableDetails, disableOnPress, isConversation, inThread } =
     useContext(StatusContext)
   const actualAccount = account || status?.account
   if (!actualAccount) return null
@@ -54,6 +54,7 @@ const TimelineAvatar: React.FC<Props> = ({ account }) => {
         marginRight: StyleConstants.Spacing.S
       }}
       dim
+      withoutTransition={inThread}
     />
   )
 }
diff --git a/src/components/Timeline/Shared/Card.tsx b/src/components/Timeline/Shared/Card.tsx
index 86e2ae4e..d77ae525 100644
--- a/src/components/Timeline/Shared/Card.tsx
+++ b/src/components/Timeline/Shared/Card.tsx
@@ -16,7 +16,7 @@ import TimelineDefault from '../Default'
 import StatusContext from './Context'
 
 const TimelineCard: React.FC = () => {
-  const { status, spoilerHidden, disableDetails } = useContext(StatusContext)
+  const { status, spoilerHidden, disableDetails, inThread } = useContext(StatusContext)
   if (!status || !status.card) return null
 
   const { colors } = useTheme()
@@ -86,6 +86,7 @@ const TimelineCard: React.FC = () => {
             style={{ flexBasis: StyleConstants.Font.LineHeight.M * 5 }}
             imageStyle={{ borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}
             dim
+            withoutTransition={inThread}
           />
         ) : null}
         <View style={{ flex: 1, padding: StyleConstants.Spacing.S }}>