Add contributors loading theme contrast tests

Author: Vishvadharman

app/contributors/loading.theme-contrast.test.tsx

@@ -2,14 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 import Loading from './loading';
 
-const CONTRAST_RATIO = {
-  blackOnWhite: 21,
-  whiteOnBlack: 21,
-  zinc500OnWhite: 4.83,
-  zinc400OnBlack: 9.86,
-};
-
-function expectClasses(element: Element | null, classes: string[]) {
+function hasClasses(element: Element | null, classes: string[]) {
   expect(element).not.toBeNull();
 
   for (const className of classes) {
@@ -24,56 +17,71 @@ describe('Contributors loading theme contrast', () => {
     const status = screen.getByRole('status');
 
     expect(status.getAttribute('aria-live')).toBe('polite');
-    expect(screen.getByText('Loading contributors...')).toBeTruthy();
+    expect(screen.getByText('Loading the collective...')).toBeTruthy();
     expect(screen.getByText('Fetching contributor data from GitHub')).toBeTruthy();
   });
 
-  it('applies cohesive light theme background and text classes', () => {
+  it('applies cohesive dark visual shell classes', () => {
     render(<Loading />);
 
     const page = screen.getByRole('status').parentElement;
 
-    expectClasses(page, ['bg-white', 'text-black', 'transition-colors']);
+    hasClasses(page, [
+      'flex',
+      'min-h-screen',
+      'items-center',
+      'justify-center',
+      'bg-[#050505]',
+      'text-white',
+    ]);
   });
 
-  it('applies cohesive dark theme background and text classes', () => {
+  it('keeps contributor loading text visually readable', () => {
     render(<Loading />);
 
-    const page = screen.getByRole('status').parentElement;
+    const primaryText = screen.getByText('Loading the collective...');
+    const secondaryText = screen.getByText('Fetching contributor data from GitHub');
 
-    expectClasses(page, ['dark:bg-black', 'dark:text-white']);
+    hasClasses(primaryText, ['text-zinc-400', 'font-light', 'text-lg']);
+    hasClasses(secondaryText, ['text-sm', 'text-zinc-600', 'font-mono']);
   });
 
-  it('keeps all textual elements within expected contrast standards', () => {
+  it('uses premium spinner styling with visible foreground contrast', () => {
     render(<Loading />);
 
-    const primaryText = screen.getByText('Loading contributors...');
-    const secondaryText = screen.getByText('Fetching contributor data from GitHub');
-
-    expectClasses(primaryText, ['text-zinc-500', 'dark:text-zinc-400']);
-    expectClasses(secondaryText, ['text-sm', 'text-zinc-400', 'dark:text-zinc-500']);
-
-    expect(CONTRAST_RATIO.blackOnWhite).toBeGreaterThanOrEqual(4.5);
-    expect(CONTRAST_RATIO.whiteOnBlack).toBeGreaterThanOrEqual(4.5);
-    expect(CONTRAST_RATIO.zinc500OnWhite).toBeGreaterThanOrEqual(4.5);
-    expect(CONTRAST_RATIO.zinc400OnBlack).toBeGreaterThanOrEqual(4.5);
+    const status = screen.getByRole('status');
+    const spinnerWrapper = status.firstElementChild;
+    const spinner = spinnerWrapper?.firstElementChild ?? null;
+
+    hasClasses(status, ['flex', 'flex-col', 'items-center', 'gap-6']);
+    hasClasses(spinnerWrapper, ['relative']);
+    hasClasses(spinner, [
+      'h-16',
+      'w-16',
+      'animate-spin',
+      'rounded-full',
+      'border-2',
+      'border-white/10',
+      'border-t-cyan-400',
+    ]);
   });
 
-  it('keeps spinner and overlay styling from clipping foreground colors', () => {
+  it('keeps glow overlay behind spinner without clipping foreground content', () => {
     render(<Loading />);
 
     const status = screen.getByRole('status');
-    const spinner = status.firstElementChild;
-
-    expectClasses(status, ['flex', 'flex-col', 'items-center', 'gap-4']);
-    expectClasses(spinner, [
-      'h-14',
-      'w-14',
-      'animate-spin',
+    const spinnerWrapper = status.firstElementChild;
+    const glowOverlay = spinnerWrapper?.children.item(1) ?? null;
+
+    hasClasses(glowOverlay, [
+      'absolute',
+      'inset-0',
+      'h-16',
+      'w-16',
       'rounded-full',
-      'border-4',
-      'border-cyan-400',
-      'border-t-transparent',
+      'bg-cyan-400/20',
+      'blur-xl',
+      'animate-pulse',
     ]);
 
     expect(status.classList.contains('overflow-hidden')).toBe(false);