fix: use PF Button isLoading for refresh spinner

The custom CSS spin animation on SyncAltIcon was not the
standard PatternFly approach. Replace it with the built-in
Button isLoading prop, which shows a native PF spinner and
handles prefers-reduced-motion automatically.

Also place the create and refresh buttons side-by-side with
a toolbar separator instead of right-aligning refresh, and
disable the refresh button while a fetch is in flight.

Signed-off-by: Matej Vašek <matejvasek@gmail.com>
Co-Authored-By: Claude <noreply@anthropic.com>

Author: matejvasek

src/views/FunctionsListPage.css

@@ -462,7 +462,7 @@ describe('FunctionsListPage', () => {
     });
   });
 
-  it('does not spin the refresh icon on initial page load', async () => {
+  it('does not show spinner on refresh button during initial page load', async () => {
     renderAuthenticated();
     mockUseSourceControl.mockReturnValue({
       listFunctionRepos: vi.fn().mockResolvedValue([repoFixture('fn-a')]),
@@ -478,11 +478,11 @@ describe('FunctionsListPage', () => {
 
     await screen.findByTestId('fn-name');
 
-    const icon = screen.getByRole('button', { name: 'Refresh' }).querySelector('svg');
-    expect(icon?.classList.contains('func-console__refresh-spin')).toBe(false);
+    const refreshBtn = screen.getByRole('button', { name: 'Refresh' });
+    expect(refreshBtn.querySelector('[role="progressbar"]')).not.toBeInTheDocument();
   });
 
-  it('spins the refresh icon only while a button-triggered refresh is in flight', async () => {
+  it('shows spinner on refresh button only while a button-triggered refresh is in flight', async () => {
     renderAuthenticated();
     let resolveRepos: (value: unknown[]) => void;
     const mockListRepos = vi.fn().mockImplementation(
@@ -507,16 +507,16 @@ describe('FunctionsListPage', () => {
     resolveRepos!([repoFixture('fn-a')]);
     await screen.findByTestId('fn-name');
 
-    const icon = screen.getByRole('button', { name: 'Refresh' }).querySelector('svg');
+    const refreshBtn = screen.getByRole('button', { name: 'Refresh' });
 
-    // Click refresh -- icon should spin
-    await userEvent.click(screen.getByRole('button', { name: 'Refresh' }));
-    expect(icon?.classList.contains('func-console__refresh-spin')).toBe(true);
+    // Click refresh -- should show spinner
+    await userEvent.click(refreshBtn);
+    expect(refreshBtn.querySelector('[role="progressbar"]')).toBeInTheDocument();
 
-    // Resolve the refresh fetch -- icon should stop
+    // Resolve the refresh fetch -- spinner should disappear
     resolveRepos!([repoFixture('fn-a')]);
     await waitFor(() => {
-      expect(icon?.classList.contains('func-console__refresh-spin')).toBe(false);
+      expect(refreshBtn.querySelector('[role="progressbar"]')).not.toBeInTheDocument();
     });
   });
 

src/views/FunctionsListPage.test.tsx

@@ -12,7 +12,6 @@ import {
   Spinner,
   Toolbar,
   ToolbarContent,
-  ToolbarGroup,
   ToolbarItem,
   Tooltip,
 } from '@patternfly/react-core';
@@ -31,7 +30,6 @@ import { useClusterService } from '../services/cluster/useClusterService';
 import { useSourceControlService } from '../services/source-control/useSourceControlService';
 import { RepoMetadata } from '../services/types';
 import { errorMessage, parseNamespaceAndRuntime } from '../utils/utils';
-import './FunctionsListPage.css';
 
 export default function FunctionsListPage() {
   return (
@@ -87,17 +85,20 @@ function FunctionsListPageContent() {
                     </Button>
                   )}
                 </ToolbarItem>
-                <ToolbarGroup align={{ default: 'alignEnd' }}>
-                  <ToolbarItem>
-                    <Tooltip content={t('Refresh')}>
-                      <Button variant="plain" aria-label={t('Refresh')} onClick={onRefresh}>
-                        <SyncAltIcon
-                          className={refreshing ? 'func-console__refresh-spin' : undefined}
-                        />
-                      </Button>
-                    </Tooltip>
-                  </ToolbarItem>
-                </ToolbarGroup>
+                <ToolbarItem variant="separator" />
+                <ToolbarItem>
+                  <Tooltip content={t('Refresh')}>
+                    <Button
+                      variant="plain"
+                      aria-label={t('Refresh')}
+                      onClick={onRefresh}
+                      isLoading={refreshing}
+                      spinnerAriaLabel={t('Refreshing')}
+                      isDisabled={refreshing}
+                      icon={<SyncAltIcon />}
+                    />
+                  </Tooltip>
+                </ToolbarItem>
               </ToolbarContent>
             </Toolbar>
             <FunctionTable functions={functions} onEdit={onEdit} />