[Feature]: Improve feedback and micro‑interactions in the UI

[Athina09]

Title: Enhance user feedback and micro-interactions across the UI

---

Our UI currently provides limited feedback during user actions, which can make the experience feel unresponsive or unclear. This issue aims to introduce consistent, polished feedback and micro-interactions so users always understand what is happening and feel confident that their actions are working.

Goals

• Make loading states feel intentional instead of “broken” or empty.
• Clearly confirm important user actions (success and failure).
• Add subtle motion that makes the UI feel smoother and more responsive, without being distracting.

Scope

• Loading states

  • Replace blank or static areas during data fetching with clear loading indicators (e.g., spinners, progress bars, or skeleton loaders) in key views and high-traffic components.
  • Ensure loading indicators are visually consistent (size, color, placement) across the app.

• Success / error / toast messages

  • After important user actions (e.g., create, update, delete, submit, send), display a brief, non-blocking confirmation (toast or inline message).
  • Use a consistent pattern for:
    • Placement (e.g., top-right toast, inline under form, etc.)
    • Variants (success, error, warning, info)
    • Duration and dismiss behavior.
  • Make error messages specific and actionable where possible.

• Transitions & animations

  • Add subtle transitions (approx. 150–250ms) for:
    • Opening/closing modals or drawers
    • Opening/closing dropdowns and menus
    • Hover/focus states on buttons, links, and interactive cards
  • Keep motion lightweight and performant (no excessive or jarring animations).
  • Ensure all animations degrade gracefully on lower-end devices and do not block interactions.

Non-goals

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

Problem it Solves

Users currently receive little to no visual feedback while the app is loading data or processing actions, which can make the interface feel slow, unresponsive, or unreliable. By adding consistent loading states, confirmations, and subtle transitions, we reduce uncertainty, improve perceived performance, and make the overall experience feel more polished and trustworthy.

Suggested Implementation

• Introduce a shared loading component (spinner, progress bar, or skeleton) and reuse it across key pages and reusable data-fetching components.
• Implement a centralized toast/notification system (or standardize usage if one already exists) with clear variants for success, error, warning, and info.
• Add a small set of shared animation/transition tokens (e.g., CSS variables or utility classes for duration, easing) and apply them to:
  • Modal/drawer open/close
  • Dropdowns/menus
  • Button and card hover/focus states
• Validate that all new interactions remain accessible (focus states visible, ARIA where needed, reduced-motion support if applicable).

[Athina09]

please assign

[DharanSJIT]

Hi @Athina09, I would like to work on this issue.

I plan to improve:

• Loading states (spinners/skeletons)
• Toast notifications for user actions
• Smooth transitions and hover interactions

Please assign this to me. Thanks!