Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

* Add a loading indicator to notifications when loading latest

* Adjust size and alignment

authored by

Paul Frazee and committed by
GitHub
86e81650 4efd576f

+19 -3
+19 -3
src/view/screens/Notifications.tsx
··· 30 30 import {ListMethods} from 'view/com/util/List' 31 31 import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' 32 32 import {CenteredView} from 'view/com/util/Views' 33 + import {Loader} from '#/components/Loader' 33 34 import {Feed} from '../com/notifications/Feed' 34 35 import {FAB} from '../com/util/fab/FAB' 35 36 import {MainScrollProvider} from '../com/util/MainScrollProvider' ··· 43 44 const {_} = useLingui() 44 45 const setMinimalShellMode = useSetMinimalShellMode() 45 46 const [isScrolledDown, setIsScrolledDown] = React.useState(false) 47 + const [isLoadingLatest, setIsLoadingLatest] = React.useState(false) 46 48 const scrollElRef = React.useRef<ListMethods>(null) 47 49 const {screen} = useAnalytics() 48 50 const pal = usePalette('default') ··· 68 70 truncateAndInvalidate(queryClient, NOTIFS_RQKEY()) 69 71 } else { 70 72 // check with the server 71 - unreadApi.checkUnread({invalidate: true}) 73 + setIsLoadingLatest(true) 74 + unreadApi 75 + .checkUnread({invalidate: true}) 76 + .catch(() => undefined) 77 + .then(() => setIsLoadingLatest(false)) 72 78 } 73 - }, [scrollToTop, queryClient, unreadApi, hasNew]) 79 + }, [scrollToTop, queryClient, unreadApi, hasNew, setIsLoadingLatest]) 74 80 75 81 const onFocusCheckLatest = useNonReactiveCallback(() => { 76 82 // on focus, check for latest, but only invalidate if the user ··· 139 145 } 140 146 onPress={emitSoftReset} 141 147 /> 148 + {isLoadingLatest ? <Loader size="md" /> : <></>} 142 149 </View> 143 150 ) 144 151 } 145 152 return <></> 146 - }, [isDesktop, pal, hasNew]) 153 + }, [isDesktop, pal, hasNew, isLoadingLatest]) 154 + 155 + const renderHeaderSpinner = React.useCallback(() => { 156 + return ( 157 + <View style={{width: 30, height: 20, alignItems: 'flex-end'}}> 158 + {isLoadingLatest ? <Loader width={20} /> : <></>} 159 + </View> 160 + ) 161 + }, [isLoadingLatest]) 147 162 148 163 return ( 149 164 <CenteredView ··· 154 169 title={_(msg`Notifications`)} 155 170 canGoBack={false} 156 171 showBorder={true} 172 + renderButton={renderHeaderSpinner} 157 173 /> 158 174 <MainScrollProvider> 159 175 <Feed