zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Fix laggy scrolling on mobile app's home screen, etc. (#4108) 

* Improve scrolling performance for List

* Update List.tsx

* Apply same fix to profile labels

---------

Co-authored-by: dan <dan.abramov@gmail.com>
zio/stable
Pokai Chang 2024-05-21 08:41:12 +08:00 committed by GitHub
parent 4a7436886d
commit cadc33c625
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/screens/Profile/Sections/Labels.tsx
View File

@ -111,20 +111,27 @@ export function ProfileLabelsSectionInner({
headerHeight: number headerHeight: number
}) { }) {
const t = useTheme() const t = useTheme()
const contextScrollHandlers = useScrollHandlers()
// Intentionally destructured outside the main thread closure.
// See https://github.com/bluesky-social/social-app/pull/4108.
const {
onBeginDrag: onBeginDragFromContext,
onEndDrag: onEndDragFromContext,
onScroll: onScrollFromContext,
onMomentumEnd: onMomentumEndFromContext,
} = useScrollHandlers()
const scrollHandler = useAnimatedScrollHandler({ const scrollHandler = useAnimatedScrollHandler({
onBeginDrag(e, ctx) { onBeginDrag(e, ctx) {
contextScrollHandlers.onBeginDrag?.(e, ctx) onBeginDragFromContext?.(e, ctx)
}, },
onEndDrag(e, ctx) { onEndDrag(e, ctx) {
contextScrollHandlers.onEndDrag?.(e, ctx) onEndDragFromContext?.(e, ctx)
}, },
onScroll(e, ctx) { onScroll(e, ctx) {
contextScrollHandlers.onScroll?.(e, ctx) onScrollFromContext?.(e, ctx)
}, },
onMomentumEnd(e, ctx) { onMomentumEnd(e, ctx) {
contextScrollHandlers.onMomentumEnd?.(e, ctx) onMomentumEndFromContext?.(e, ctx)
}, },
}) })

17
src/view/com/util/List.tsx
View File

@ -44,22 +44,29 @@ function ListImpl<ItemT>(
ref: React.Ref<ListMethods>, ref: React.Ref<ListMethods>,
) { ) {
const isScrolledDown = useSharedValue(false) const isScrolledDown = useSharedValue(false)
const contextScrollHandlers = useScrollHandlers()
const pal = usePalette('default') const pal = usePalette('default')
function handleScrolledDownChange(didScrollDown: boolean) { function handleScrolledDownChange(didScrollDown: boolean) {
onScrolledDownChange?.(didScrollDown) onScrolledDownChange?.(didScrollDown)
} }
// Intentionally destructured outside the main thread closure.
// See https://github.com/bluesky-social/social-app/pull/4108.
const {
onBeginDrag: onBeginDragFromContext,
onEndDrag: onEndDragFromContext,
onScroll: onScrollFromContext,
onMomentumEnd: onMomentumEndFromContext,
} = useScrollHandlers()
const scrollHandler = useAnimatedScrollHandler({ const scrollHandler = useAnimatedScrollHandler({
onBeginDrag(e, ctx) { onBeginDrag(e, ctx) {
contextScrollHandlers.onBeginDrag?.(e, ctx) onBeginDragFromContext?.(e, ctx)
}, },
onEndDrag(e, ctx) { onEndDrag(e, ctx) {
contextScrollHandlers.onEndDrag?.(e, ctx) onEndDragFromContext?.(e, ctx)
}, },
onScroll(e, ctx) { onScroll(e, ctx) {
contextScrollHandlers.onScroll?.(e, ctx) onScrollFromContext?.(e, ctx)
const didScrollDown = e.contentOffset.y > SCROLLED_DOWN_LIMIT const didScrollDown = e.contentOffset.y > SCROLLED_DOWN_LIMIT
if (isScrolledDown.value !== didScrollDown) { if (isScrolledDown.value !== didScrollDown) {
@ -72,7 +79,7 @@ function ListImpl<ItemT>(
// Note: adding onMomentumBegin here makes simulator scroll // Note: adding onMomentumBegin here makes simulator scroll
// lag on Android. So either don't add it, or figure out why. // lag on Android. So either don't add it, or figure out why.
onMomentumEnd(e, ctx) { onMomentumEnd(e, ctx) {
contextScrollHandlers.onMomentumEnd?.(e, ctx) onMomentumEndFromContext?.(e, ctx)
}, },
}) })