Enhancement: Add Loading Indicators and Duplicate Submission Prevention for Transaction Actions

[mithilP007]

Problem Statement

Currently, the transaction creation and update workflow does not properly handle multiple rapid submissions while a request is still processing.

Users can click the submit/update button multiple times, which may lead to:

• duplicate transaction entries
• repeated API/database requests
• inconsistent dashboard totals
• accidental duplicate expenses/income records
• confusing UI behavior during async operations

Additionally, there is limited visual feedback during processing, making it unclear whether a request is still running.

Proposed Solution

Implement proper async loading-state handling and duplicate submission prevention for transaction-related actions.

Suggested improvements:

• disable submit/update buttons while requests are processing
• add loading indicators/spinners
• prevent duplicate requests using execution guards
• restore UI state correctly after request completion/failure
• improve async cleanup using finally

Example:

if (loading) return;

setLoading(true);

try {
  await submitTransaction();
} finally {
  setLoading(false);
}

Optional enhancements:

• toast notifications
• reusable loading button component
• debounce/throttle handling
• optimistic UI updates

Affected Component

Frontend Dashboard (Next.js — apps/frontend/)

Estimated Difficulty

🟢 Beginner — Small, self-contained change

Alternatives Considered

A temporary workaround is manually avoiding repeated clicks during submission, but this is unreliable and does not solve the underlying async state-management issue.

Frontend-only button disabling without proper request-state handling was also considered, but a more complete async workflow solution would provide better reliability and scalability.

Additional Context

This enhancement improves:

• frontend responsiveness
• data consistency
• backend efficiency
• transaction reliability
• overall user experience

Similar patterns are commonly implemented in financial/productivity applications to avoid duplicate actions and improve UX during async operations.

Contribution

• I would like to implement this feature and submit a PR.

Checklist

• I have searched existing issues and this is not a duplicate.
• I have read the CONTRIBUTING.md guidelines.

[nancy-verma780]

Hi @mithilP007 and project maintainers,

I see that the author has expressed interest in working on this. If for any reason they become unavailable or the issue opens up later, I would love to step in and implement this enhancement!

I am fully prepared to add the processing states, disable the buttons during active async cycles using absolute finally blocks, and implement smooth visual spinner states to guarantee data consistency.

Please let me know if I can help out as a backup contributor!

[nishita1797-glitch]

/assign gssoc

[mithilP007]

The duplicate submission prevention, loading indicators, and execution guards have been fully implemented.