feat: add loading overlays and animations across various pages

- Implemented new CSS animations for UI elements including bobbing, pulsing, rotating, and spinning effects.
- Integrated loading overlays in CrowdSecConfig, Login, ProxyHosts, Security, and WafConfig pages to enhance user experience during asynchronous operations.
- Added contextual messages for loading states to inform users about ongoing processes.
- Created tests for Login and Security pages to ensure overlays function correctly during login attempts and security operations.

frontend/src/components/__tests__/LoadingStates-overlays.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { CharonLoader, CharonCoinLoader, CerberusLoader, ConfigReloadOverlay } from '../LoadingStates'
+
+describe('CharonLoader', () => {
+  it('renders boat animation with accessibility label', () => {
+    render(<CharonLoader />)
+    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Loading')
+  })
+
+  it('renders with different sizes', () => {
+    const { rerender } = render(<CharonLoader size="sm" />)
+    expect(screen.getByRole('status')).toBeInTheDocument()
+
+    rerender(<CharonLoader size="lg" />)
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+})
+
+describe('CharonCoinLoader', () => {
+  it('renders coin animation with accessibility label', () => {
+    render(<CharonCoinLoader />)
+    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Authenticating')
+  })
+
+  it('renders with different sizes', () => {
+    const { rerender } = render(<CharonCoinLoader size="sm" />)
+    expect(screen.getByRole('status')).toBeInTheDocument()
+
+    rerender(<CharonCoinLoader size="lg" />)
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+})
+
+describe('CerberusLoader', () => {
+  it('renders guardian animation with accessibility label', () => {
+    render(<CerberusLoader />)
+    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Security Loading')
+  })
+
+  it('renders with different sizes', () => {
+    const { rerender } = render(<CerberusLoader size="sm" />)
+    expect(screen.getByRole('status')).toBeInTheDocument()
+
+    rerender(<CerberusLoader size="lg" />)
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+})
+
+describe('ConfigReloadOverlay', () => {
+  it('renders with Charon theme (default)', () => {
+    render(<ConfigReloadOverlay />)
+    expect(screen.getByText('Ferrying configuration...')).toBeInTheDocument()
+    expect(screen.getByText('Charon is crossing the Styx')).toBeInTheDocument()
+  })
+
+  it('renders with Coin theme', () => {
+    render(
+      <ConfigReloadOverlay
+        message="Paying the ferryman..."
+        submessage="Your obol grants passage"
+        type="coin"
+      />
+    )
+    expect(screen.getByText('Paying the ferryman...')).toBeInTheDocument()
+    expect(screen.getByText('Your obol grants passage')).toBeInTheDocument()
+  })
+
+  it('renders with Cerberus theme', () => {
+    render(
+      <ConfigReloadOverlay
+        message="Cerberus awakens..."
+        submessage="Guardian of the gates stands watch"
+        type="cerberus"
+      />
+    )
+    expect(screen.getByText('Cerberus awakens...')).toBeInTheDocument()
+    expect(screen.getByText('Guardian of the gates stands watch')).toBeInTheDocument()
+  })
+
+  it('renders with custom messages', () => {
+    render(
+      <ConfigReloadOverlay
+        message="Custom message"
+        submessage="Custom submessage"
+        type="charon"
+      />
+    )
+    expect(screen.getByText('Custom message')).toBeInTheDocument()
+    expect(screen.getByText('Custom submessage')).toBeInTheDocument()
+  })
+
+  it('applies correct theme colors', () => {
+    const { container, rerender } = render(<ConfigReloadOverlay type="charon" />)
+    let overlay = container.querySelector('.bg-blue-950\\/90')
+    expect(overlay).toBeInTheDocument()
+
+    rerender(<ConfigReloadOverlay type="coin" />)
+    overlay = container.querySelector('.bg-amber-950\\/90')
+    expect(overlay).toBeInTheDocument()
+
+    rerender(<ConfigReloadOverlay type="cerberus" />)
+    overlay = container.querySelector('.bg-red-950\\/90')
+    expect(overlay).toBeInTheDocument()
+  })
+
+  it('renders as full-screen overlay with high z-index', () => {
+    const { container } = render(<ConfigReloadOverlay />)
+    const overlay = container.querySelector('.fixed.inset-0.z-50')
+    expect(overlay).toBeInTheDocument()
+  })
+})