forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+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