Enhance user feedback and micro-interactions across the UI

[Athina09]

Summary

This PR improves user feedback and micro-interactions across the UI so actions feel more responsive and clear. It adds consistent loading indicators, non-blocking success/error messages, and subtle motion for key interactions.

Problem it Solves

Our UI currently provides limited feedback during user actions, which can make the experience feel unresponsive or unclear. Users often see blank or static states while data is loading and get blocking alert() dialogs instead of contextual confirmations. This work introduces consistent, polished feedback so users always understand what is happening and feel confident that their actions are working.

Changes

• Loading states

  • Replace blank or static areas during data fetching with clear loading indicators (spinner/overlay and skeleton utilities) in key views.
  • Ensure loading indicators are visually consistent in size, color, and placement.

• Success / error / toast messages

  • Introduce a global toast system for brief, non-blocking confirmations after important actions (create, update, delete, submit, download).
  • Use consistent patterns for:
    • Placement (top-right toaster)
    • Variants (success, error, etc.)
    • Duration and dismiss behavior.
  • Replace blocking alert() usages with specific, actionable error messages where appropriate.

• Transitions & animations

  • Add subtle transitions (~150–250ms) around key interactions where relevant (e.g. loading overlays, hover states), keeping motion lightweight and performant.
  • Ensure animations do not interfere with interactions and remain accessible.

Non-goals

• Large-scale visual redesign or rebranding.
• Changing core navigation structure or information architecture.

Test Plan

• Trigger data-loading flows in updated screens and verify:
  • Users see a clear loading indicator instead of a blank or frozen-looking state.
  • The indicator disappears as soon as content is ready.
• Perform important actions (e.g., download, submit, save) and verify:
  • A success or error toast appears in the top-right with appropriate messaging.
  • No blocking alerts are shown for these flows.
• Check that transitions/animations:
  • Feel smooth and brief (no jarring or long-running animations).
  • Do not block clicks, keyboard navigation, or screen reader usage.