Disable animation on scrollToTop for web (#2137)

7 files changed, 36 insertions, 9 deletions

diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx
index 3624e6565..31ebc75a1 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 618f4e5cd..cadd3bd88 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 95cf8fde6..0609c0e21 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<SectionRef, ProfileListsProps>(
     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 3ce1128a6..0af6484f3 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 946057efb..21353e5d3 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<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])
diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx
index f803930d1..620b1814a 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<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])
diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx
index f50c6afb3..923560efd 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<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, () => ({