Add a loading indicator to notifications when loading latest (#4468)
* Add a loading indicator to notifications when loading latest * Adjust size and alignmentzio/stable
parent
4efd576f6a
commit
86e81650d3
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue