From 940fc0ea5c3aefb49f39d8de9398a306882ed567 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 7 Dec 2023 13:41:02 -0800 Subject: [PATCH] Disable animation on scrollToTop for web (#2137) --- src/view/com/feeds/FeedPage.tsx | 6 +++++- src/view/com/feeds/ProfileFeedgens.tsx | 6 +++++- src/view/com/lists/ProfileLists.tsx | 6 +++++- src/view/screens/Notifications.tsx | 3 ++- src/view/screens/Profile.tsx | 6 +++++- src/view/screens/ProfileFeed.tsx | 6 +++++- src/view/screens/ProfileList.tsx | 12 +++++++++--- 7 files changed, 36 insertions(+), 9 deletions(-) diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx index 3624e656..31ebc75a 100644 --- a/src/view/com/feeds/FeedPage.tsx +++ b/src/view/com/feeds/FeedPage.tsx @@ -25,6 +25,7 @@ import {useComposerControls} from '#/state/shell/composer' import {listenSoftReset, emitSoftReset} from '#/state/events' import {truncateAndInvalidate} from '#/state/queries/util' import {TabState, getTabState, getRootNavigation} from '#/lib/routes/helpers' +import {isNative} from '#/platform/detection' const POLL_FREQ = 30e3 // 30sec @@ -57,7 +58,10 @@ export function FeedPage({ const [hasNew, setHasNew] = React.useState(false) const scrollToTop = React.useCallback(() => { - scrollElRef.current?.scrollToOffset({offset: -headerOffset}) + scrollElRef.current?.scrollToOffset({ + animated: isNative, + offset: -headerOffset, + }) resetMainScroll() }, [headerOffset, resetMainScroll]) diff --git a/src/view/com/feeds/ProfileFeedgens.tsx b/src/view/com/feeds/ProfileFeedgens.tsx index 618f4e5c..cadd3bd8 100644 --- a/src/view/com/feeds/ProfileFeedgens.tsx +++ b/src/view/com/feeds/ProfileFeedgens.tsx @@ -24,6 +24,7 @@ import {useTheme} from '#/lib/ThemeContext' import {usePreferencesQuery} from '#/state/queries/preferences' import {hydrateFeedGenerator} from '#/state/queries/feed' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {isNative} from '#/platform/detection' const LOADING = {_reactKey: '__loading__'} const EMPTY = {_reactKey: '__empty__'} @@ -104,7 +105,10 @@ export const ProfileFeedgens = React.forwardRef< const queryClient = useQueryClient() const onScrollToTop = React.useCallback(() => { - scrollElRef.current?.scrollToOffset({offset: -headerOffset}) + scrollElRef.current?.scrollToOffset({ + animated: isNative, + offset: -headerOffset, + }) queryClient.invalidateQueries({queryKey: RQKEY(did)}) }, [scrollElRef, queryClient, headerOffset, did]) diff --git a/src/view/com/lists/ProfileLists.tsx b/src/view/com/lists/ProfileLists.tsx index 95cf8fde..0609c0e2 100644 --- a/src/view/com/lists/ProfileLists.tsx +++ b/src/view/com/lists/ProfileLists.tsx @@ -23,6 +23,7 @@ import {cleanError} from '#/lib/strings/errors' import {useAnimatedScrollHandler} from 'react-native-reanimated' import {useTheme} from '#/lib/ThemeContext' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {isNative} from '#/platform/detection' const LOADING = {_reactKey: '__loading__'} const EMPTY = {_reactKey: '__empty__'} @@ -106,7 +107,10 @@ export const ProfileLists = React.forwardRef( const queryClient = useQueryClient() const onScrollToTop = React.useCallback(() => { - scrollElRef.current?.scrollToOffset({offset: -headerOffset}) + scrollElRef.current?.scrollToOffset({ + animated: isNative, + offset: -headerOffset, + }) queryClient.invalidateQueries({queryKey: RQKEY(did)}) }, [scrollElRef, queryClient, headerOffset, did]) diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 3ce1128a..0af6484f 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -26,6 +26,7 @@ import { import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed' import {listenSoftReset, emitSoftReset} from '#/state/events' import {truncateAndInvalidate} from '#/state/queries/util' +import {isNative} from '#/platform/detection' type Props = NativeStackScreenProps< NotificationsTabNavigatorParams, @@ -47,7 +48,7 @@ export function NotificationsScreen({}: Props) { // event handlers // = const scrollToTop = React.useCallback(() => { - scrollElRef.current?.scrollToOffset({offset: 0}) + scrollElRef.current?.scrollToOffset({animated: isNative, offset: 0}) resetMainScroll() }, [scrollElRef, resetMainScroll]) diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 946057ef..21353e5d 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -38,6 +38,7 @@ import {listenSoftReset} from '#/state/events' import {truncateAndInvalidate} from '#/state/queries/util' import {Text} from '#/view/com/util/text/Text' import {usePalette} from 'lib/hooks/usePalette' +import {isNative} from '#/platform/detection' interface SectionRef { scrollToTop: () => void @@ -419,7 +420,10 @@ const FeedSection = React.forwardRef( const [hasNew, setHasNew] = React.useState(false) const onScrollToTop = React.useCallback(() => { - scrollElRef.current?.scrollToOffset({offset: -headerHeight}) + scrollElRef.current?.scrollToOffset({ + animated: isNative, + offset: -headerHeight, + }) truncateAndInvalidate(queryClient, FEED_RQKEY(feed)) setHasNew(false) }, [scrollElRef, headerHeight, queryClient, feed, setHasNew]) diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index f803930d..620b1814 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -65,6 +65,7 @@ import {useSession} from '#/state/session' import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like' import {useComposerControls} from '#/state/shell/composer' import {truncateAndInvalidate} from '#/state/queries/util' +import {isNative} from '#/platform/detection' const SECTION_TITLES = ['Posts', 'About'] @@ -511,7 +512,10 @@ const FeedSection = React.forwardRef( const queryClient = useQueryClient() const onScrollToTop = useCallback(() => { - scrollElRef.current?.scrollToOffset({offset: -headerHeight}) + scrollElRef.current?.scrollToOffset({ + animated: isNative, + offset: -headerHeight, + }) truncateAndInvalidate(queryClient, FEED_RQKEY(feed)) setHasNew(false) }, [scrollElRef, headerHeight, queryClient, feed, setHasNew]) diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index f50c6afb..923560ef 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -54,7 +54,7 @@ import { import {cleanError} from '#/lib/strings/errors' import {useSession} from '#/state/session' import {useComposerControls} from '#/state/shell/composer' -import {isWeb} from '#/platform/detection' +import {isNative, isWeb} from '#/platform/detection' import {truncateAndInvalidate} from '#/state/queries/util' import { usePreferencesQuery, @@ -563,7 +563,10 @@ const FeedSection = React.forwardRef( const [hasNew, setHasNew] = React.useState(false) const onScrollToTop = useCallback(() => { - scrollElRef.current?.scrollToOffset({offset: -headerHeight}) + scrollElRef.current?.scrollToOffset({ + animated: isNative, + offset: -headerHeight, + }) queryClient.resetQueries({queryKey: FEED_RQKEY(feed)}) setHasNew(false) }, [scrollElRef, headerHeight, queryClient, feed, setHasNew]) @@ -633,7 +636,10 @@ const AboutSection = React.forwardRef( ) const onScrollToTop = useCallback(() => { - scrollElRef.current?.scrollToOffset({offset: -headerHeight}) + scrollElRef.current?.scrollToOffset({ + animated: isNative, + offset: -headerHeight, + }) }, [scrollElRef, headerHeight]) React.useImperativeHandle(ref, () => ({