Skip to content

feat(spinner): add resuable spinner component with size variant #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LikithaYadavG wants to merge 2 commits into
base: feat/card-component
Choose a base branch
from
Open

feat(spinner): add resuable spinner component with size variant #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
36f071f
feat(spinner): add accessible spinner component with size variants
LikithaYadavG Jan 19, 2026
f14692f
refactor(spinner): simplify renderSpinner function and remove redunda…
LikithaYadavG Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions src/components/spinner/Spinner.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { render, screen } from "@testing-library/react";

@mergemitra mergemitra Bot Jan 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Severity: 🟠 Major
Update tests to actually verify the component’s default size behavior and remove the unused userEvent setup.

Suggested Change:

import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import { Spinner, type SpinnerProps } from "./Spinner";

const renderSpinner = (props: Partial<SpinnerProps> = {}) => {
  render(<Spinner {...props} />);
  return screen.getByRole("status", { name: /loading/i });
};

describe("Spinner", () => {
  it("should render medium size spinner by default", () => {
    const spinner = renderSpinner(); // no size prop
    expect(spinner).toHaveClass("w-8", "h-8");
  });

  it("should render small size spinner when size is sm", () => {
    const spinner = renderSpinner({ size: "sm" });
    expect(spinner).toHaveClass("w-4", "h-4");
  });

  it("should render large size spinner when size is lg", () => {
    const spinner = renderSpinner({ size: "lg" });
    expect(spinner).toHaveClass("w-12", "h-12");
  });
});

import userEvent from "@testing-library/user-event";
import { describe, it, expect } from "vitest";
import { Spinner, type SpinnerProps } from "./Spinner";

const defaultProps: SpinnerProps = {
size: "md",
className: "",
};

const renderSpinner = (additionalProps?: Partial<SpinnerProps>) => {
const user = userEvent.setup();

render(<Spinner {...defaultProps} {...additionalProps} />);

return {
user,
spinner: screen.getByRole("status", { name: /loading/i }),
};
};

describe("Spinner", () => {
it("should render a loading indicator with accessible role", () => {
const { spinner } = renderSpinner();

expect(spinner).toBeInTheDocument();
});
});
19 changes: 19 additions & 0 deletions src/components/spinner/Spinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export interface SpinnerProps {
size?: "sm" | "md" | "lg";
className?: string;
}

export const Spinner = ({ size = "md", className = "" }: SpinnerProps) => {

@mergemitra mergemitra Bot Jan 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Severity: 🟠 Major
Make the spinner more reusable/accessibility-friendly by fixing the border-3 class, forwarding standard DOM props, and allowing the accessible label to be customized.

Suggested Change:

import type { HTMLAttributes } from "react";

const SIZE_STYLES = {
  sm: "w-4 h-4 border-2",
  md: "w-8 h-8 border-[3px]", // or a Tailwind-supported border width
  lg: "w-12 h-12 border-4",
} as const;

export type SpinnerProps = {
  size?: keyof typeof SIZE_STYLES;
  ariaLabel?: string;
  className?: string;
} & Omit<HTMLAttributes<HTMLSpanElement>, "aria-label">;

export const Spinner = ({
  size = "md",
  ariaLabel = "Loading",
  className = "",
  ...rest
}: SpinnerProps) => {
  const sizeClass = SIZE_STYLES[size] ?? SIZE_STYLES.md;

  return (
    <span
      role="status"
      aria-live="polite"
      aria-label={ariaLabel}
      className={`inline-block ${sizeClass} border-gray-200 border-t-blue-600 rounded-full animate-spin ${className}`.trim()}
      {...rest}
    />
  );
};

const sizeStyles = {
sm: "w-4 h-4 border-2",
md: "w-8 h-8 border-3",
lg: "w-12 h-12 border-4",
} as const;

return (
<output
className={`inline-block ${sizeStyles[size]} border-gray-200 border-t-blue-600 rounded-full animate-spin ${className}`}
aria-label="Loading"
/>
);
};