@@ -19,7 +19,8 @@ export const Sidebar: React.FC = () => {
19
19
const location = useLocation ( ) ;
20
20
21
21
const { isLoggedIn } = useContext ( AppContext ) ;
22
- const { notifications, fetchNotifications } = useContext ( AppContext ) ;
22
+ const { notifications, fetchNotifications, isFetching } =
23
+ useContext ( AppContext ) ;
23
24
24
25
const onOpenBrowser = useCallback ( ( ) => {
25
26
openExternalLink ( `https://github.com/${ Constants . REPO_SLUG } ` ) ;
@@ -38,10 +39,10 @@ export const Sidebar: React.FC = () => {
38
39
} , [ notifications ] ) ;
39
40
40
41
const sidebarButtonClasses =
41
- 'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none' ;
42
+ 'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default ' ;
42
43
43
44
return (
44
- < div className = "flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto " >
45
+ < div className = "flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto" >
45
46
< div className = "flex flex-col flex-1 items-center py-4" >
46
47
< button
47
48
className = "w-5 my-3 mx-auto cursor-pointer outline-none"
@@ -77,8 +78,13 @@ export const Sidebar: React.FC = () => {
77
78
navigate ( '/' , { replace : true } ) ;
78
79
fetchNotifications ( ) ;
79
80
} }
81
+ disabled = { isFetching }
80
82
>
81
- < SyncIcon size = { 16 } aria-label = "Refresh Notifications" />
83
+ < SyncIcon
84
+ size = { 16 }
85
+ aria-label = "Refresh Notifications"
86
+ className = { isFetching ? 'animate-spin' : undefined }
87
+ />
82
88
</ button >
83
89
84
90
< button
0 commit comments