octo/tooot
octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-01-31 02:37:13 +01:00
Code Issues Projects Releases Wiki Activity

Refine scroll after fetch newer

Browse Source
This commit is contained in:
xmflsct 2023-01-07 12:10:41 +01:00
parent 1704c0401c
commit 88528f5293
1 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Timeline/Refresh.tsx
View File

@ -31,7 +31,7 @@ export interface Props {
disableRefresh?: boolean disableRefresh?: boolean
} }
const CONTAINER_HEIGHT = StyleConstants.Spacing.M * 2 const CONTAINER_HEIGHT = StyleConstants.Spacing.M * 2.5
export const SEPARATION_Y_1 = -(CONTAINER_HEIGHT / 2 + StyleConstants.Font.Size.S / 2) export const SEPARATION_Y_1 = -(CONTAINER_HEIGHT / 2 + StyleConstants.Font.Size.S / 2)
export const SEPARATION_Y_2 = -(CONTAINER_HEIGHT * 1.5 + StyleConstants.Font.Size.S / 2) export const SEPARATION_Y_2 = -(CONTAINER_HEIGHT * 1.5 + StyleConstants.Font.Size.S / 2)
@ -119,6 +119,7 @@ const TimelineRefresh: React.FC<Props> = ({
[isFetching] [isFetching]
) )
const fetchAndScrolled = useSharedValue(false)
const runFetchPrevious = async () => { const runFetchPrevious = async () => {
if (prevActive.current) return if (prevActive.current) return
@ -140,7 +141,8 @@ const TimelineRefresh: React.FC<Props> = ({
: { min_id: firstPage.links.prev.id }) : { min_id: firstPage.links.prev.id })
}, },
meta: {} meta: {}
}).then(res => { })
.then(res => {
queryClient.setQueryData< queryClient.setQueryData<
InfiniteData< InfiniteData<
PagedResponse<(Mastodon.Status | Mastodon.Notification | Mastodon.Conversation)[]> PagedResponse<(Mastodon.Status | Mastodon.Notification | Mastodon.Conversation)[]>
@ -149,13 +151,21 @@ const TimelineRefresh: React.FC<Props> = ({
if (!old) return old if (!old) return old
prevCache.current = res.body.slice(0, -PREV_PER_BATCH) prevCache.current = res.body.slice(0, -PREV_PER_BATCH)
return { ...old, pages: [{ ...res, body: res.body.slice(-PREV_PER_BATCH) }, ...old.pages] } return {
}) ...old,
}) pages: [{ ...res, body: res.body.slice(-PREV_PER_BATCH) }, ...old.pages]
} }
useEffect(() => { })
const loop = async () => {
for await (const _ of Array(Math.ceil((prevCache.current?.length || 0) / PREV_PER_BATCH))) { return res.body.length - PREV_PER_BATCH
})
.then(async nextLength => {
for (let [index] of Array(Math.ceil(nextLength / PREV_PER_BATCH)).entries()) {
if (!fetchAndScrolled.value && index < 3 && scrollY.value > 15) {
fetchAndScrolled.value = true
flRef.current?.scrollToOffset({ offset: scrollY.value - 15, animated: true })
}
await new Promise(promise => setTimeout(promise, 32)) await new Promise(promise => setTimeout(promise, 32))
queryClient.setQueryData< queryClient.setQueryData<
InfiniteData< InfiniteData<
@ -181,13 +191,10 @@ const TimelineRefresh: React.FC<Props> = ({
}) })
} }
}) })
break
} }
prevActive.current = false prevActive.current = false
})
} }
loop()
}, [prevCache.current])
const runFetchLatest = async () => { const runFetchLatest = async () => {
queryClient.invalidateQueries(queryKey) queryClient.invalidateQueries(queryKey)