Floating "Load more" makeover (#8420)

src/view/com/feeds/FeedPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {View} from 'react-native'
 import {type AppBskyActorDefs, AppBskyFeedDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
@@ -58,14 +58,14 @@ export function FeedPage({
   const navigation = useNavigation<NavigationProp<AllNavigatorParams>>()
   const queryClient = useQueryClient()
   const {openComposer} = useOpenComposer()
-  const [isScrolledDown, setIsScrolledDown] = React.useState(false)
+  const [isScrolledDown, setIsScrolledDown] = useState(false)
   const setMinimalShellMode = useSetMinimalShellMode()
   const headerOffset = useHeaderOffset()
   const feedFeedback = useFeedFeedback(feed, hasSession)
-  const scrollElRef = React.useRef<ListMethods>(null)
-  const [hasNew, setHasNew] = React.useState(false)
+  const scrollElRef = useRef<ListMethods>(null)
+  const [hasNew, setHasNew] = useState(false)
   const setHomeBadge = useSetHomeBadge()
-  const isVideoFeed = React.useMemo(() => {
+  const isVideoFeed = useMemo(() => {
     const isBskyVideoFeed = VIDEO_FEED_URIS.includes(feedInfo.uri)
     const feedIsVideoMode =
       feedInfo.contentMode === AppBskyFeedDefs.CONTENTMODEVIDEO
@@ -73,13 +73,13 @@ export function FeedPage({
     return isNative && _isVideoFeed
   }, [feedInfo])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isPageFocused) {
       setHomeBadge(hasNew)
     }
   }, [isPageFocused, hasNew, setHomeBadge])
 
-  const scrollToTop = React.useCallback(() => {
+  const scrollToTop = useCallback(() => {
     scrollElRef.current?.scrollToOffset({
       animated: isNative,
       offset: -headerOffset,
@@ -87,7 +87,7 @@ export function FeedPage({
     setMinimalShellMode(false)
   }, [headerOffset, setMinimalShellMode])
 
-  const onSoftReset = React.useCallback(() => {
+  const onSoftReset = useCallback(() => {
     const isScreenFocused =
       getTabState(getRootNavigation(navigation).getState(), 'Home') ===
       TabState.InsideAtRoot
@@ -101,21 +101,21 @@ export function FeedPage({
         reason: 'soft-reset',
       })
     }
-  }, [navigation, isPageFocused, scrollToTop, queryClient, feed, setHasNew])
+  }, [navigation, isPageFocused, scrollToTop, queryClient, feed])
 
   // fires when page within screen is activated/deactivated
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isPageFocused) {
       return
     }
     return listenSoftReset(onSoftReset)
   }, [onSoftReset, isPageFocused])
 
-  const onPressCompose = React.useCallback(() => {
+  const onPressCompose = useCallback(() => {
     openComposer({})
   }, [openComposer])
 
-  const onPressLoadLatest = React.useCallback(() => {
+  const onPressLoadLatest = useCallback(() => {
     scrollToTop()
     truncateAndInvalidate(queryClient, FEED_RQKEY(feed))
     setHasNew(false)
@@ -124,7 +124,7 @@ export function FeedPage({
       feedUrl: feed,
       reason: 'load-latest',
     })
-  }, [scrollToTop, feed, queryClient, setHasNew])
+  }, [scrollToTop, feed, queryClient])
 
   const shouldPrefetch = isNative && isPageAdjacent
   return (