feat: loading notifications animation

ROADMAP.md

@@ -11,9 +11,7 @@ A list of "things" to improve
 - [ ] improve test coverage
 - [ ] make filters a dropdown overlay
 - [ ] theme: restore ability to toggle theme (DARK and System)
-- [ ] animate refresh icon
 - [ ] badge counts for each filter group
-- [ ] fix mark as read (product and account level) animation and state removal
 
 ## Later
 - [ ] advanced feature for Bitbucket "Your Work" queue

package.json

@@ -88,6 +88,7 @@
   },
   "dependencies": {
     "@atlaskit/modal-dialog": "12.16.0",
+    "@atlaskit/spinner": "16.3.1",
     "@discordapp/twemoji": "15.1.0",
     "@electron/remote": "2.1.2",
     "axios": "1.7.7",

src/components/Sidebar.tsx

@@ -12,6 +12,7 @@ import { AtlasIcon } from '@atlaskit/logo';
 import { Box, Inline, Stack, Text } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 
+import Spinner from '@atlaskit/spinner';
 import Toggle from '@atlaskit/toggle';
 import { AppContext } from '../context/App';
 import { quitApp } from '../utils/comms';
@@ -29,6 +30,7 @@ export const Sidebar: FC = () => {
     isLoggedIn,
     settings,
     updateSetting,
+    status,
   } = useContext(AppContext);
 
   const toggleFilters = () => {
@@ -195,16 +197,25 @@ export const Sidebar: FC = () => {
               <Tooltip content="Refresh notifications" position="right">
                 <IconButton
                   label="Refresh notifications"
-                  icon={(iconProps) => (
-                    <RefreshIcon
-                      {...iconProps}
-                      size="medium"
-                      primaryColor="white"
-                    />
-                  )}
+                  icon={(iconProps) =>
+                    status === 'loading' ? (
+                      <Spinner
+                        label="Refresh notifications"
+                        size={'medium'}
+                        appearance="invert"
+                      />
+                    ) : (
+                      <RefreshIcon
+                        {...iconProps}
+                        size="medium"
+                        primaryColor="white"
+                      />
+                    )
+                  }
                   appearance="subtle"
                   shape="circle"
                   onClick={() => refreshNotifications()}
+                  isDisabled={status === 'loading'}
                 />
               </Tooltip>