fix: @primer motion animations for refresh

package.json

@@ -102,6 +102,7 @@
     "@parcel/watcher": "2.6.0",
     "@primer/css": "22.3.0",
     "@primer/octicons-react": "19.33.0",
+    "@primer/primitives": "11.10.0",
     "@primer/react": "38.38.0",
     "@tailwindcss/vite": "4.3.3",
     "@tanstack/react-query": "5.102.8",

src/renderer/App.css

@@ -4,6 +4,9 @@
 /** GitHub Primer Design System */
 @import '@primer/css/dist/primer.css';
 
+/** GitHub Primer Primitives - motion tokens (required by Primer React's Spinner & Skeleton animations) */
+@import '@primer/primitives/dist/css/base/motion/motion.css';
+
 /** Tailwind CSS Configuration */
 @config "../../tailwind.config.mts";
 

src/renderer/components/Sidebar.test.tsx

@@ -208,24 +208,37 @@ describe('renderer/components/Sidebar.tsx', () => {
       expect(fetchNotificationsMock).not.toHaveBeenCalled();
     });
 
-    it('animates the refresh icon while a background fetch is in flight, regardless of settled status', () => {
+    it('shows a loading spinner on the refresh icon while the initial fetch is loading', () => {
       renderWithProviders(<Sidebar />, {
+        accounts: [mockGitHubCloudAccount],
+        status: 'loading',
+      });
+
+      expect(screen.getByTestId('sidebar-refresh')).toHaveAttribute('data-loading', 'true');
+      expect(screen.getByTestId('sidebar-refresh')).toBeDisabled();
+    });
+
+    it('shows a loading spinner on the refresh icon while a background fetch is in flight, regardless of settled status', () => {
+      const tree = renderWithProviders(<Sidebar />, {
         accounts: [mockGitHubCloudAccount],
         status: 'error',
         isFetching: true,
       });
 
-      expect(screen.getByTestId('sidebar-refresh')).toHaveClass('animate-spin');
+      expect(screen.getByTestId('sidebar-refresh')).toHaveAttribute('data-loading', 'true');
+      expect(tree.container.querySelector('[data-component="Spinner"]')).toBeInTheDocument();
+      expect(screen.getByTestId('sidebar-refresh')).toBeDisabled();
     });
 
-    it('does not animate the refresh icon when settled and no fetch is in flight', () => {
+    it('does not show a loading spinner on the refresh icon when settled and no fetch is in flight', () => {
       renderWithProviders(<Sidebar />, {
         accounts: [mockGitHubCloudAccount],
         status: 'error',
         isFetching: false,
       });
 
-      expect(screen.getByTestId('sidebar-refresh')).not.toHaveClass('animate-spin');
+      expect(screen.getByTestId('sidebar-refresh')).toHaveAttribute('data-loading', 'false');
+      expect(screen.getByTestId('sidebar-refresh')).toBeEnabled();
     });
   });
 

src/renderer/components/Sidebar.tsx

@@ -124,13 +124,12 @@ export const Sidebar: FC = () => {
           <>
             <IconButton
               aria-label="Refresh"
-              className={status === 'loading' || isFetching ? 'animate-spin' : ''}
               data-testid="sidebar-refresh"
               description="Refresh notifications"
-              disabled={isLoading}
+              loading={isLoading || isFetching}
+              disabled={isLoading || isFetching}
               icon={SyncIcon}
               keybindingHint={shortcuts.refresh.key}
-              // loading={status === 'loading'}
               onClick={() => shortcuts.refresh.action()}
               size="small"
               tooltipDirection="e"