feat: skeleton and aria-live loading state for test call

[AugistineCreates]

This pr closes #98

Implements an accessible loading state for the ApiUsage "Make Test Call" response area by replacing the plain "Loading..." text with a realistic skeleton loader, adding screen reader accessibility attributes, adding a progress spinner to the action button, and disabling duplicate submissions.

Key Changes

1. Interactive Trigger Button (src/ApiUsage.tsx):

   • Added a highly polished progress spinner (.button-spinner) to the button when isLoading is active.
   • Cleanly disabled the button during an active call (disabled={isLoading}) to prevent duplicate submissions.

2. Accessible Loading Region (src/ApiUsage.tsx):

   • Marked the response container with aria-live="polite" and aria-busy={isLoading} to ensure loading and completion states are correctly announced to screen readers (meeting WCAG 2.1 AA 4.1.3).
   • Replaced the plain "Loading..." placeholder with a layout of diverse width skeletons using the existing src/components/Skeleton.tsx component, simulating the structure of the JSON payload.

3. Styling & Theme Support (src/index.css):

   • Integrated the keyframe-based @keyframes spin animation and loader styling using existing design tokens.
   • Supported a modern, responsive layout for the skeleton placeholders, looking excellent in both Light and Dark themes.

Verification Results

• Successfully verified the production bundle build using TypeScript compiler checks (tsc -b && vite build) which compiles cleanly without any warnings or errors.
• Confirmed layout adapts dynamically to dark/light theme adjustments.

[drips-wave]

@AugistineCreates Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits