feat: Add loading spinner to create election button

[gautamsidhwani29]

Description

Added a loading state to the "Create Election" button to improve UX during transaction processing. Currently, the button remains static when clicked, leading to user confusion and potential double-submissions.

Summary of the Change :

This PR introduces an isLoading state that:

1. Shows a spinner/loader animation.
2. Persists until the proccessing of election creation is either confirmed or fails (e.g., due to timeout).

Fixes #208

Type of change

• Updated UI/UX

Checklist:

• I have performed a self-review of my own code
• My changes generate no new warnings

Screencast.from.2025-12-20.04-16-29.mp4

Summary by CodeRabbit

• New Features
  • Added a loading indicator and disable state to the election creation submit button so users see a loader and cannot resubmit while the request is in progress.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Added a loading state to the Create Election flow: the component tracks isLoading, displays an rsuite Loader and disables the submit button while the contract write is in progress, and resets isLoading in a finally block after completion or failure.

Changes

Cohort / File(s)	Summary
Loading State UI Enhancement client/app/create/page.tsx	Added isLoading state and toggling around the contract write call. Imported Loader from rsuite. Submit button now disables during loading and conditionally renders the Loader instead of static "Create Election" text. isLoading is reset in a finally block.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify isLoading initialization and that it's set true before the async contract write and cleared in every exit path (including errors).
• Confirm the button disabled attribute and Loader rendering behave correctly in various UI states.
• Ensure no UI blocking or unhandled promise rejections occur during the write flow.

Poem

🐰 I hop in code with a cheerful decree,
A spinner now dances where blank buttons used to be.
Clicks feel calmer, feedback bright and true,
Elections proceed — the loader hops with you! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely summarizes the main change: adding a loading spinner to the create election button.
Linked Issues check	✅ Passed	The PR implementation fully addresses issue #208 by adding isLoading state, spinner display, and button disabling during transaction processing.
Out of Scope Changes check	✅ Passed	All changes in the PR are directly related to adding loading state functionality to the create election button, with no extraneous modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

client/app/create/page.tsx (2)

20-20: State initialization looks good, minor formatting suggestion.

The loading state is correctly initialized to false. Consider adding a space after the comma for consistency with code style conventions.

🔎 Optional formatting improvement

-  const [isLoading,setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);

---

238-238: Consider adding size props to the Loader for better visual alignment.

The conditional rendering logic is correct, but the Loader component may benefit from explicit sizing to ensure it aligns well with the button's text height and provides clear visual feedback.

🔎 Optional improvements

-            {isLoading ? <Loader/>: "Create Election"}
+            {isLoading ? <Loader size="sm" /> : "Create Election"}

This ensures the loader is appropriately sized for the button context. You may also want to add descriptive text alongside the loader:

-            {isLoading ? <Loader/>: "Create Election"}
+            {isLoading ? (
+              <span className="flex items-center justify-center gap-2">
+                <Loader size="sm" />
+                Creating...
+              </span>
+            ) : "Create Election"}

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2d3a4dd and 3b8fd3d.

📒 Files selected for processing (1)

• client/app/create/page.tsx (4 hunks)

🔇 Additional comments (1)

client/app/create/page.tsx (1)

16-16: LGTM!

The import statement is correct and rsuite is already a project dependency.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

client/app/create/page.tsx (2)

20-20: Minor: Add space after comma for consistency.

For better readability and consistency with standard TypeScript formatting conventions, consider adding a space after the comma in the array destructuring.

🔎 Proposed formatting adjustment

-  const [isLoading,setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);

---

234-242: Previous critical issue resolved! Consider conditionally applying animations.

Great work addressing the previous review feedback! The button now correctly:

• Disables during loading (line 234)
• Displays visual disabled styling (lines 235-239)
• Shows a Loader component during submission (line 242)

This successfully prevents double-submissions as intended by issue #208.

Optional refinement: The whileHover and whileTap props on lines 239-240 might still attempt to animate even when the button is disabled. For cleaner UX, consider conditionally applying these animations only when not loading.

🔎 Optional refinement to conditionally apply animations

 <motion.button
   type="submit"
   disabled={isLoading}
   className={`w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white 
     ${isLoading 
       ? "bg-indigo-400 cursor-not-allowed opacity-70" 
       : "bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700" 
     } focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`}
-  whileHover={{ scale: 1.02 }}
-  whileTap={{ scale: 0.98 }}
+  whileHover={!isLoading ? { scale: 1.02 } : {}}
+  whileTap={!isLoading ? { scale: 0.98 } : {}}
 >
   {isLoading ? <Loader/>: "Create Election"}
 </motion.button>

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3b8fd3d and 3da1a6f.

📒 Files selected for processing (1)

• client/app/create/page.tsx (4 hunks)

🔇 Additional comments (2)

client/app/create/page.tsx (2)

84-84: LGTM! Loading state management is correctly implemented.

The loading state is set after all validation checks pass and is properly reset in the finally block, ensuring the UI recovers correctly whether the transaction succeeds or fails. This addresses the core requirement from issue #208.

Also applies to: 102-104

---

16-16: Add size prop to Loader component for consistent button appearance.

Use the Loader's size prop to set appropriate dimensions when rendering within the button. For a button context, consider size="sm" or size="xs" to match button sizing conventions.