Skip to content

Commit 61e5c95

Browse files
fix: Add loading state to "Refresh Notifications" button (#962)
1 parent d4b1c1f commit 61e5c95

File tree

2 files changed

+14
-8
lines changed

2 files changed

+14
-8
lines changed

src/components/Sidebar.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ export const Sidebar: React.FC = () => {
1919
const location = useLocation();
2020

2121
const { isLoggedIn } = useContext(AppContext);
22-
const { notifications, fetchNotifications } = useContext(AppContext);
22+
const { notifications, fetchNotifications, isFetching } =
23+
useContext(AppContext);
2324

2425
const onOpenBrowser = useCallback(() => {
2526
openExternalLink(`https://github.com/${Constants.REPO_SLUG}`);
@@ -38,10 +39,10 @@ export const Sidebar: React.FC = () => {
3839
}, [notifications]);
3940

4041
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';
4243

4344
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">
4546
<div className="flex flex-col flex-1 items-center py-4">
4647
<button
4748
className="w-5 my-3 mx-auto cursor-pointer outline-none"
@@ -77,8 +78,13 @@ export const Sidebar: React.FC = () => {
7778
navigate('/', { replace: true });
7879
fetchNotifications();
7980
}}
81+
disabled={isFetching}
8082
>
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+
/>
8288
</button>
8389

8490
<button

src/components/__snapshots__/Sidebar.test.tsx.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`components/Sidebar.tsx should render itself & its children (logged in) 1`] = `
44
<div
5-
className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto "
5+
className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto"
66
>
77
<div
88
className="flex flex-col flex-1 items-center py-4"
@@ -94,7 +94,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
9494
>
9595
<button
9696
aria-label="Quit Gitify"
97-
className="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"
97+
className="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"
9898
onClick={[Function]}
9999
title="Quit Gitify"
100100
>
@@ -127,7 +127,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
127127

128128
exports[`components/Sidebar.tsx should render itself & its children (logged out) 1`] = `
129129
<div
130-
className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto "
130+
className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto"
131131
>
132132
<div
133133
className="flex flex-col flex-1 items-center py-4"
@@ -219,7 +219,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
219219
>
220220
<button
221221
aria-label="Quit Gitify"
222-
className="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"
222+
className="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"
223223
onClick={[Function]}
224224
title="Quit Gitify"
225225
>

0 commit comments

Comments
 (0)