Disable animation on scrollToTop for web (#2137)
This commit is contained in:
parent
f115969f50
commit
940fc0ea5c
7 changed files with 36 additions and 9 deletions
|
@ -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])
|
||||
|
||||
|
|
|
@ -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<SectionRef, FeedSectionProps>(
|
|||
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])
|
||||
|
|
|
@ -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<SectionRef, FeedSectionProps>(
|
|||
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])
|
||||
|
|
|
@ -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<SectionRef, FeedSectionProps>(
|
|||
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<SectionRef, AboutSectionProps>(
|
|||
)
|
||||
|
||||
const onScrollToTop = useCallback(() => {
|
||||
scrollElRef.current?.scrollToOffset({offset: -headerHeight})
|
||||
scrollElRef.current?.scrollToOffset({
|
||||
animated: isNative,
|
||||
offset: -headerHeight,
|
||||
})
|
||||
}, [scrollElRef, headerHeight])
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue