Add a loading indicator to notifications when loading latest (#4468)

* Add a loading indicator to notifications when loading latest

* Adjust size and alignment
zio/stable
Paul Frazee 2024-06-10 16:17:34 -07:00 committed by GitHub
parent 4efd576f6a
commit 86e81650d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 3 deletions

View File

@ -30,6 +30,7 @@ import {TextLink} from 'view/com/util/Link'
import {ListMethods} from 'view/com/util/List'
import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
import {CenteredView} from 'view/com/util/Views'
import {Loader} from '#/components/Loader'
import {Feed} from '../com/notifications/Feed'
import {FAB} from '../com/util/fab/FAB'
import {MainScrollProvider} from '../com/util/MainScrollProvider'
@ -43,6 +44,7 @@ export function NotificationsScreen({}: Props) {
const {_} = useLingui()
const setMinimalShellMode = useSetMinimalShellMode()
const [isScrolledDown, setIsScrolledDown] = React.useState(false)
const [isLoadingLatest, setIsLoadingLatest] = React.useState(false)
const scrollElRef = React.useRef<ListMethods>(null)
const {screen} = useAnalytics()
const pal = usePalette('default')
@ -68,9 +70,13 @@ export function NotificationsScreen({}: Props) {
truncateAndInvalidate(queryClient, NOTIFS_RQKEY())
} else {
// check with the server
unreadApi.checkUnread({invalidate: true})
setIsLoadingLatest(true)
unreadApi
.checkUnread({invalidate: true})
.catch(() => undefined)
.then(() => setIsLoadingLatest(false))
}
}, [scrollToTop, queryClient, unreadApi, hasNew])
}, [scrollToTop, queryClient, unreadApi, hasNew, setIsLoadingLatest])
const onFocusCheckLatest = useNonReactiveCallback(() => {
// on focus, check for latest, but only invalidate if the user
@ -139,11 +145,20 @@ export function NotificationsScreen({}: Props) {
}
onPress={emitSoftReset}
/>
{isLoadingLatest ? <Loader size="md" /> : <></>}
</View>
)
}
return <></>
}, [isDesktop, pal, hasNew])
}, [isDesktop, pal, hasNew, isLoadingLatest])
const renderHeaderSpinner = React.useCallback(() => {
return (
<View style={{width: 30, height: 20, alignItems: 'flex-end'}}>
{isLoadingLatest ? <Loader width={20} /> : <></>}
</View>
)
}, [isLoadingLatest])
return (
<CenteredView
@ -154,6 +169,7 @@ export function NotificationsScreen({}: Props) {
title={_(msg`Notifications`)}
canGoBack={false}
showBorder={true}
renderButton={renderHeaderSpinner}
/>
<MainScrollProvider>
<Feed