feat(ui): add interactive hover focus and disabled states to loading …

[iamTissan]

This PR implements interactive states (hover, focus-visible, and disabled) using Tailwind CSS utilities across the LoadingSkeleton and ButtonSpinner components, fulfilling the requirements outlined in #274. It also resolves a character encoding artifact in the skeleton live-region message and adds full Vitest/React Testing Library test coverage.

Key Changes
LoadingSkeleton.tsx:

Added optional interactive props: interactive, disabled, onClick, tabIndex, and aria-label.
Styled hover and focus states with smooth transitions (hover:border-gray-700, hover:bg-gray-900/90, hover:shadow-lg, focus-visible:ring-2, focus-visible:ring-blue-500, focus-visible:outline-none).
Implemented keyboard accessibility (Enter / Space keydown handlers) and dynamic ARIA roles (role="button" when interactive, role="status" default).
Handled disabled states (opacity-50, cursor-not-allowed, pointer-events-none, aria-disabled="true").
Fixed mojibake encoding string (Loading job data...).

ButtonSpinner.tsx:
Added disabled prop support with responsive opacity and cursor classes.
Added smooth transition tokens for hover and disabled states.
tests/loading_spinner_skeleton.test.tsx:
Added unit test suite verifying rendering, ARIA attributes, interactive classes, click/keyboard event handlers, and disabled state behavior for both components.

Closes #274

Type of Change
[ ] Bug fix (non-breaking change that fixes an issue)
[x] New feature (non-breaking change that adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
[ ] Documentation update
[x] Refactor / code cleanup
[ ] CI / tooling / developer experience

How Has This Been Tested?
[x] Manual testing (verified interactive focus outlines and hover styles)
[x] Automated tests added (6/6 passing via Vitest)
Test steps:

Run pnpm vitest run loading_spinner_skeleton to verify all skeleton and spinner unit tests pass.
Render and verify keyboard focus produces a blue ring outline and hover elevates background/border styling.
Render and verify click events do not fire and disabled styles are applied.
Render and confirm disabled opacity is applied.

Checklist
[x] My code follows the style guidelines of this project
[x] I have performed a self-review of my own code
[x] I have commented on complex or non-obvious areas of the code
[x] I have updated documentation where necessary
[x] My changes generate no new warnings
[x] New and existing tests pass locally
[x] I have checked that no sensitive information (keys, passwords, tokens) is committed

[drips-wave]

@iamTissan 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