Implement Loading Indicators for Button Interactions

[pmora3003]

✨ Objective

Improve the user experience of the DeVote voting interface by adding loading indicators. Currently, when users trigger actions (such as submitting votes or interacting with blockchain data), no visual feedback is provided, causing confusion and repeated interactions.

Pages that need a skeleton:

• DevoteApp/app/admin/edit-proposal/[id][/page](tg://bot_command?command=page).tsx
• DevoteApp/components/CreateProposalModal.tsx
• DevoteApp/components/CreateUserModal.tsx
• DevoteApp/components/LoginModal.tsx
• DevoteApp/components/ModifyUserModal.tsx
• DevoteApp/app/admin/page.tsx

🛠 Tasks

🔌Frontend Integration

• Identify any other components where actions may result in a delay (e.g., voting or fetching results).
• Add a loading skeleton (spinner or shimmer) using TailwindCSS while the action is pending.
• Disable button interactions during loading to prevent duplicate submissions.
• Ensure the loading indicators match the current UI style of DeVote.

💻 Components to Check

• Frontend/app/vote/[id]/page.tsx
• Frontend/components/ui/LoadingSkeleton.tsx (create if not present)

💡 UX Enhancements

• Show clear feedback while transactions are processing.
• Display success or failure messages after action completes.
• Prevent multiple submissions by disabling inputs during processing.

✅ Acceptance Criteria

• Loading skeleton appears whenever a voting action is triggered and remains until completion.
• UI disables inputs to avoid repeated actions during loading.
• Consistent loading behavior across all pages where blockchain actions occur.

📦 Resources

• Frontend component to modify: Frontend/app/vote/[id]/page.tsx
• Utilities: TailwindCSS.
• Loading components path: Frontend/components/ui/

[Oshioke-Salaki]

Please can i take this up?
I am a well experienced frontend developer