octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Improve toot page loading

Browse Source
This commit is contained in:
xmflsct
2023-01-15 18:00:58 +01:00
parent 0efb7e5b70
commit 8814161e0e
3 changed files with 150 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/openLink.ts
View File

@ -35,7 +35,7 @@ const openLink = async (url: string, navigation?: any) => {
return return
} else { } else {
try { try {
response = await searchLocalStatus(url) response = await searchLocalStatus(url, true)
} catch {} } catch {}
if (response) { if (response) {
handleNavigation('Tab-Shared-Toot', { toot: response }) handleNavigation('Tab-Shared-Toot', { toot: response })
@ -64,7 +64,7 @@ const openLink = async (url: string, navigation?: any) => {
return return
} else { } else {
try { try {
response = await searchLocalAccount(url) response = await searchLocalAccount(url, true)
} catch {} } catch {}
if (response) { if (response) {
handleNavigation('Tab-Shared-Account', { account: response }) handleNavigation('Tab-Shared-Account', { account: response })

251
src/screens/Tabs/Shared/Toot.tsx
View File

@ -15,7 +15,7 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager' import { useTheme } from '@utils/styles/ThemeManager'
import React, { useEffect, useRef, useState } from 'react' import React, { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Alert, FlatList, Pressable, View } from 'react-native' import { Alert, FlatList, Platform, Pressable, View } from 'react-native'
import { Circle } from 'react-native-animated-spinkit' import { Circle } from 'react-native-animated-spinkit'
import { Path, Svg } from 'react-native-svg' import { Path, Svg } from 'react-native-svg'
@ -34,6 +34,8 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
remote: ['Timeline', { page: 'Toot', toot: toot.id, remote: true }] remote: ['Timeline', { page: 'Toot', toot: toot.id, remote: true }]
} }
const flRef = useRef<FlatList<Mastodon.Status & { _level?: number }>>(null)
useEffect(() => { useEffect(() => {
navigation.setOptions({ navigation.setOptions({
headerTitle: () => ( headerTitle: () => (
@ -69,12 +71,12 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
navigation.setParams({ toot, queryKey: queryKey.local }) navigation.setParams({ toot, queryKey: queryKey.local })
}, [hasRemoteContent]) }, [hasRemoteContent])
const flRef = useRef<FlatList>(null) const PREV_PER_BATCH = 1
const scrolled = useRef(false) const ancestorsCache = useRef<(Mastodon.Status & { _level?: number })[]>()
const loaded = useRef<boolean>(false)
const match = urlMatcher(toot.url || toot.uri) const match = urlMatcher(toot.url || toot.uri)
const highlightIndex = useRef<number>(0) const query = useQuery<{ pages: { body: (Mastodon.Status & { _level?: number })[] }[] }>(
const query = useQuery<{ pages: { body: Mastodon.Status[] }[] }>(
queryKey.local, queryKey.local,
async () => { async () => {
const context = await apiInstance<{ const context = await apiInstance<{
@ -85,15 +87,14 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
url: `statuses/${toot.id}/context` url: `statuses/${toot.id}/context`
}).then(res => res.body) }).then(res => res.body)
highlightIndex.current = context.ancestors.length ancestorsCache.current = [...context.ancestors]
const statuses = [{ ...toot }, ...context.descendants]
const statuses = [...context.ancestors, { ...toot }, ...context.descendants]
return { return {
pages: [ pages: [
{ {
body: statuses.map((status, index) => { body: statuses.map((status, index) => {
if (index < highlightIndex.current || status.id === toot.id) { if (index === 0) {
status._level = 0 status._level = 0
return status return status
} else { } else {
@ -117,26 +118,6 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
navigation.goBack() navigation.goBack()
return return
} }
if (!scrolled.current) {
scrolled.current = true
const pointer = data.pages[0].body.findIndex(({ id }) => id === toot.id)
if (pointer < 1) return
const length = flRef.current?.props.data?.length
if (!length) return
try {
setTimeout(() => {
try {
flRef.current?.scrollToIndex({
index: pointer,
viewOffset: 100
})
} catch {}
}, 500)
} catch (error) {
return
}
}
} }
} }
) )
@ -165,19 +146,45 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
return Promise.resolve([{ ...toot }]) return Promise.resolve([{ ...toot }])
} }
highlightIndex.current = context.ancestors.length ancestorsCache.current = context.ancestors.map(ancestor => {
const localMatch = ancestorsCache.current?.find(local => local.uri === ancestor.uri)
const statuses = [...context.ancestors, { ...toot }, ...context.descendants] if (localMatch) {
return { ...localMatch, _level: 0 }
} else {
return {
...ancestor,
_remote: true,
account: { ...ancestor.account, _remote: true },
mentions: ancestor.mentions.map(mention => ({
...mention,
_remote: true
})),
...(ancestor.reblog && {
reblog: {
...ancestor.reblog,
_remote: true,
account: { ...ancestor.reblog.account, _remote: true },
mentions: ancestor.reblog.mentions.map(mention => ({
...mention,
_remote: true
}))
}
})
}
}
})
const statuses = [{ ...toot }, ...context.descendants]
return statuses.map((status, index) => { return statuses.map((status, index) => {
if (index < highlightIndex.current || status.id === toot.id) { if (index === 0) {
status._level = 0 status._level = 0
return status return status
} else {
const repliedLevel: number =
statuses.find(s => s.id === status.in_reply_to_id)?._level || 0
status._level = repliedLevel + 1
return status
} }
const repliedLevel: number = statuses.find(s => s.id === status.in_reply_to_id)?._level || 0
status._level = repliedLevel + 1
return status
}) })
}, },
{ {
@ -187,7 +194,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
match?.domain !== getAccountStorage.string('auth.domain'), match?.domain !== getAccountStorage.string('auth.domain'),
staleTime: 0, staleTime: 0,
refetchOnMount: true, refetchOnMount: true,
onSuccess: data => { onSuccess: async data => {
if ((query.data?.pages[0].body.length || 0) < 1 && data.length < 1) { if ((query.data?.pages[0].body.length || 0) < 1 && data.length < 1) {
navigation.goBack() navigation.goBack()
return return
@ -195,59 +202,85 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
if ((query.data?.pages[0].body.length || 0) < data.length) { if ((query.data?.pages[0].body.length || 0) < data.length) {
queryClient.cancelQueries(queryKey.local) queryClient.cancelQueries(queryKey.local)
queryClient.setQueryData<{ queryClient.setQueryData<{ pages: { body: Mastodon.Status[] }[] }>(
pages: { body: Mastodon.Status[] }[] queryKey.local,
}>(queryKey.local, old => { old => {
setHasRemoteContent(true) setHasRemoteContent(true)
return { return {
pages: [ pages: [
{ {
body: data.map(remote => { body: data.map(remote => {
const localMatch = old?.pages[0].body.find(local => local.uri === remote.uri) const localMatch = old?.pages[0].body.find(local => local.uri === remote.uri)
if (localMatch) { if (localMatch) {
return { ...localMatch, _level: remote._level } return { ...localMatch, _level: remote._level }
} else { } else {
return { return {
...remote, ...remote,
_remote: true, _remote: true,
account: { ...remote.account, _remote: true }, account: { ...remote.account, _remote: true },
mentions: remote.mentions.map(mention => ({ ...mention, _remote: true })), mentions: remote.mentions.map(mention => ({ ...mention, _remote: true })),
...(remote.reblog && { ...(remote.reblog && {
reblog: { reblog: {
...remote.reblog, ...remote.reblog,
_remote: true, _remote: true,
account: { ...remote.reblog.account, _remote: true }, account: { ...remote.reblog.account, _remote: true },
mentions: remote.reblog.mentions.map(mention => ({ mentions: remote.reblog.mentions.map(mention => ({
...mention, ...mention,
_remote: true _remote: true
})) }))
} }
}) })
}
} }
} })
}) }
} ]
] }
} }
}) )
} }
scrolled.current = true loaded.current = true
const pointer = data.findIndex(({ id }) => id === toot.id)
if (pointer < 1) return if (ancestorsCache.current?.length) {
const length = flRef.current?.props.data?.length switch (Platform.OS) {
if (!length) return case 'ios':
try { for (let [] of Array(
setTimeout(() => { Math.ceil(ancestorsCache.current.length / PREV_PER_BATCH)
try { ).entries()) {
flRef.current?.scrollToIndex({ await new Promise(promise => setTimeout(promise, 64))
index: pointer, queryClient.setQueryData<{ pages: { body: Mastodon.Status[] }[] }>(
viewOffset: 100 queryKey.local,
}) old => {
} catch {} const insert = ancestorsCache.current?.slice(-PREV_PER_BATCH)
}, 500) ancestorsCache.current = ancestorsCache.current?.slice(0, -PREV_PER_BATCH)
} catch (error) { if (insert) {
return old?.pages[0].body.unshift(...insert)
}
return old
}
)
}
break
default:
queryClient.setQueryData<{ pages: { body: Mastodon.Status[] }[] }>(
queryKey.local,
old => {
ancestorsCache.current && old?.pages[0].body.unshift(...ancestorsCache.current)
return old
}
)
setTimeout(() => {
flRef.current?.scrollToIndex({
index: (ancestorsCache.current?.length || 0),
viewOffset: 50
})
}, 50)
break
}
} }
} }
} }
@ -265,17 +298,12 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
data={query.data?.pages?.[0].body} data={query.data?.pages?.[0].body}
renderItem={({ item, index }) => { renderItem={({ item, index }) => {
const prev = query.data?.pages[0].body[index - 1]?._level || 0 const prev = query.data?.pages[0].body[index - 1]?._level || 0
const curr = item._level const curr = item._level || 0
const next = query.data?.pages[0].body[index + 1]?._level || 0 const next = query.data?.pages[0].body[index + 1]?._level || 0
return ( return (
<View <View
style={{ style={{ paddingLeft: Math.min(curr - 1, MAX_LEVEL) * StyleConstants.Spacing.S }}
paddingLeft:
index > highlightIndex.current
? Math.min(item._level - 1, MAX_LEVEL) * StyleConstants.Spacing.S
: undefined
}}
onLayout={({ onLayout={({
nativeEvent: { nativeEvent: {
layout: { height } layout: { height }
@ -397,7 +425,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
? 0 ? 0
: StyleConstants.Avatar.XS + : StyleConstants.Avatar.XS +
StyleConstants.Spacing.S + StyleConstants.Spacing.S +
Math.min(Math.max(0, leadingItem._level - 1), MAX_LEVEL) * Math.min(Math.max(0, (leadingItem._level || 0) - 1), MAX_LEVEL) *
StyleConstants.Spacing.S StyleConstants.Spacing.S
} }
/> />
@ -416,21 +444,6 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
</> </>
) )
}} }}
onScrollToIndexFailed={error => {
const offset = error.averageItemLength * error.index
flRef.current?.scrollToOffset({ offset })
try {
error.index < (query.data?.pages[0].body.length || 0) &&
setTimeout(
() =>
flRef.current?.scrollToIndex({
index: error.index,
viewOffset: 100
}),
500
)
} catch {}
}}
ListFooterComponent={ ListFooterComponent={
<View <View
style={{ style={{
@ -440,11 +453,27 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
marginHorizontal: StyleConstants.Spacing.M marginHorizontal: StyleConstants.Spacing.M
}} }}
> >
{query.isFetching ? ( {query.isLoading ? (
<Circle size={StyleConstants.Font.Size.L} color={colors.secondary} /> <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
) : null} ) : null}
</View> </View>
} }
{...(loaded.current && { maintainVisibleContentPosition: { minIndexForVisible: 0 } })}
{...(Platform.OS !== 'ios' && {
onScrollToIndexFailed: error => {
const offset = error.averageItemLength * error.index
flRef.current?.scrollToOffset({ offset })
error.index < (ancestorsCache.current?.length || 0) &&
setTimeout(
() =>
flRef.current?.scrollToIndex({
index: error.index,
viewOffset: 50
}),
50
)
}
})}
/> />
) )
} }

12
src/utils/queryHooks/search.ts
View File

@ -48,14 +48,17 @@ const useSearchQuery = <T = SearchResult>({
return useQuery(queryKey, queryFunction, { ...options, staleTime: 3600, cacheTime: 3600 }) return useQuery(queryKey, queryFunction, { ...options, staleTime: 3600, cacheTime: 3600 })
} }
export const searchLocalStatus = async (uri: Mastodon.Status['uri']): Promise<Mastodon.Status> => { export const searchLocalStatus = async (
uri: Mastodon.Status['uri'],
timeout: boolean = false
): Promise<Mastodon.Status> => {
const queryKey: QueryKeySearch = ['Search', { type: 'statuses', term: uri, limit: 1 }] const queryKey: QueryKeySearch = ['Search', { type: 'statuses', term: uri, limit: 1 }]
return await queryClient return await queryClient
.fetchQuery(queryKey, queryFunction, { .fetchQuery(queryKey, queryFunction, {
staleTime: 3600, staleTime: 3600,
cacheTime: 3600, cacheTime: 3600,
retry: false, retry: false,
meta: { timeout: 1000 } ...(timeout && { meta: { timeout: 1000 } })
}) })
.then(res => .then(res =>
res.statuses[0]?.uri === uri || res.statuses[0]?.url === uri res.statuses[0]?.uri === uri || res.statuses[0]?.url === uri
@ -65,7 +68,8 @@ export const searchLocalStatus = async (uri: Mastodon.Status['uri']): Promise<Ma
} }
export const searchLocalAccount = async ( export const searchLocalAccount = async (
url: Mastodon.Account['url'] url: Mastodon.Account['url'],
timeout: boolean = false
): Promise<Mastodon.Account> => { ): Promise<Mastodon.Account> => {
const queryKey: QueryKeySearch = ['Search', { type: 'accounts', term: url, limit: 1 }] const queryKey: QueryKeySearch = ['Search', { type: 'accounts', term: url, limit: 1 }]
return await queryClient return await queryClient
@ -73,7 +77,7 @@ export const searchLocalAccount = async (
staleTime: 3600, staleTime: 3600,
cacheTime: 3600, cacheTime: 3600,
retry: false, retry: false,
meta: { timeout: 1000 } ...(timeout && { meta: { timeout: 1000 } })
}) })
.then(res => (res.accounts[0].url === url ? res.accounts[0] : Promise.reject())) .then(res => (res.accounts[0].url === url ? res.accounts[0] : Promise.reject()))
} }