feat: add LoadMoreButton component for cursor-based pagination

src/components/ui/LoadMoreButton.test.tsx

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { LoadMoreButton } from './LoadMoreButton'
+
+describe('LoadMoreButton', () => {
+  it('renders button when hasNextPage is true', () => {
+    const mockOnLoadMore = vi.fn()
+    render(
+      <LoadMoreButton
+        hasNextPage={true}
+        isFetchingNextPage={false}
+        onLoadMore={mockOnLoadMore}
+      />
+    )
+
+    const button = screen.getByRole('button', { name: 'Load more results' })
+    expect(button).toBeTruthy()
+  })
+
+  it('hides button when hasNextPage is false', () => {
+    const mockOnLoadMore = vi.fn()
+    const { container } = render(
+      <LoadMoreButton
+        hasNextPage={false}
+        isFetchingNextPage={false}
+        onLoadMore={mockOnLoadMore}
+      />
+    )
+
+    const button = screen.queryByRole('button', { name: 'Load more results' })
+    expect(button).toBeNull()
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('shows spinner when isFetchingNextPage is true', () => {
+    const mockOnLoadMore = vi.fn()
+    render(
+      <LoadMoreButton
+        hasNextPage={true}
+        isFetchingNextPage={true}
+        onLoadMore={mockOnLoadMore}
+      />
+    )
+
+    const button = screen.getByRole('button', { name: 'Load more results' })
+    expect(button).toBeTruthy()
+
+    // Check that the spinner SVG is present
+    const spinner = button.querySelector('svg')
+    expect(spinner).toBeTruthy()
+    expect(spinner?.className).toContain('animate-spin')
+
+    // Check that "Loading..." text is shown
+    expect(screen.getByText('Loading...')).toBeTruthy()
+  })
+
+  it('shows "Load More" text when not fetching', () => {
+    const mockOnLoadMore = vi.fn()
+    render(
+      <LoadMoreButton
+        hasNextPage={true}
+        isFetchingNextPage={false}
+        onLoadMore={mockOnLoadMore}
+      />
+    )
+
+    expect(screen.getByText('Load More')).toBeTruthy()
+  })
+
+  it('disables button when isFetchingNextPage is true', () => {
+    const mockOnLoadMore = vi.fn()
+    render(
+      <LoadMoreButton
+        hasNextPage={true}
+        isFetchingNextPage={true}
+        onLoadMore={mockOnLoadMore}
+      />
+    )
+
+    const button = screen.getByRole('button', { name: 'Load more results' })
+    expect(button).toBeDisabled()
+  })
+
+  it('calls onLoadMore when clicked', () => {
+    const mockOnLoadMore = vi.fn()
+
+    render(
+      <LoadMoreButton
+        hasNextPage={true}
+        isFetchingNextPage={false}
+        onLoadMore={mockOnLoadMore}
+      />
+    )
+
+    const button = screen.getByRole('button', { name: 'Load more results' })
+    fireEvent.click(button)
+
+    expect(mockOnLoadMore).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call onLoadMore when disabled by isFetchingNextPage', () => {
+    const mockOnLoadMore = vi.fn()
+
+    render(
+      <LoadMoreButton
+        hasNextPage={true}
+        isFetchingNextPage={true}
+        onLoadMore={mockOnLoadMore}
+      />
+    )
+
+    const button = screen.getByRole('button', { name: 'Load more results' })
+    fireEvent.click(button)
+
+    expect(mockOnLoadMore).not.toHaveBeenCalled()
+  })
+
+  it('has correct aria-label for accessibility', () => {
+    const mockOnLoadMore = vi.fn()
+    render(
+      <LoadMoreButton
+        hasNextPage={true}
+        isFetchingNextPage={false}
+        onLoadMore={mockOnLoadMore}
+      />
+    )
+
+    const button = screen.getByRole('button', { name: 'Load more results' })
+    expect(button).toHaveAttribute('aria-label', 'Load more results')
+  })
+
+  it('respects disabled prop', () => {
+    const mockOnLoadMore = vi.fn()
+
+    render(
+      <LoadMoreButton
+        hasNextPage={true}
+        isFetchingNextPage={false}
+        onLoadMore={mockOnLoadMore}
+        disabled={true}
+      />
+    )
+
+    const button = screen.getByRole('button', { name: 'Load more results' })
+    expect(button).toBeDisabled()
+
+    fireEvent.click(button)
+    expect(mockOnLoadMore).not.toHaveBeenCalled()
+  })
+})

src/components/ui/LoadMoreButton.tsx

@@ -0,0 +1,52 @@
+// ─── Reusable: LoadMoreButton ─────────────────────────────────────────────────
+
+interface LoadMoreButtonProps {
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onLoadMore: () => void;
+  disabled?: boolean;
+}
+
+export function LoadMoreButton({
+  hasNextPage,
+  isFetchingNextPage,
+  onLoadMore,
+  disabled = false,
+}: LoadMoreButtonProps) {
+  // Hide button when there's no next page
+  if (!hasNextPage) {
+    return null;
+  }
+
+  return (
+    <button
+      onClick={onLoadMore}
+      disabled={isFetchingNextPage || disabled}
+      aria-label="Load more results"
+      className="w-full rounded-[6px] hover:cursor-pointer hover:bg-[#001323] py-3.5 text-sm font-semibold text-white transition-all bg-[#d4431f] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-[#E84D2A]/40 disabled:opacity-70 disabled:cursor-not-allowed"
+    >
+      {isFetchingNextPage ? (
+        <span className="flex items-center justify-center gap-2">
+          <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+          Loading...
+        </span>
+      ) : (
+        "Load More"
+      )}
+    </button>
+  );
+}