fix: add loading state to prevent duplicate flow creation on click

[AntonioABLima]

Description

This PR prevents the creation of duplicate flows when a user clicks the template card multiple times, which often happens on slower internet connections.

Changes

• Added a local loading state to TemplateGetStartedCardComponent and to the + blank flow button in TemplatesModal.
• The card and button are now unclickable while the flow creation request is pending.
• Used .finally() to reset the state, ensuring the UI recovers gracefully.

Type of Change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• Tested locally by throttling the network speed in Chrome DevTools to "Slow 3G".
• Clicked the template card multiple times; confirmed only one flow was created and the UI blocked subsequent clicks until navigation occurred.

Summary by CodeRabbit

• Bug Fixes
  • Prevented duplicate flow creation by disabling the flow creation buttons during the creation process.

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

[coderabbitai]

Walkthrough

Two flow creation UI components now include loading state management to prevent concurrent flow creations. Guards are added to click handlers, with loading state toggled before and after async operations via try/finally blocks.

Changes

Cohort / File(s)	Summary
Loading state guards for flow creation src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx, src/frontend/src/modals/templatesModal/index.tsx	Added loading state via useState to both components. Added guards in click handlers to prevent concurrent addFlow calls. Loading state set to true before async operation and reset to false in finally block after promise settles. Navigation behavior preserved.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify loading state is properly initialized and guarded in both components
• Confirm finally block reliably resets loading state even on error or cancellation
• Ensure navigation logic is preserved after flow creation completes

Pre-merge checks and finishing touches

❌ Failed checks (1 error, 3 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	PR introduces new loading state logic to prevent duplicate flow creation but includes no corresponding test files, despite project following established testing conventions with tests directories.	Add test files verifying loading state behavior, click-guard logic during loading, promise settlement handling, and navigation flow to ensure the duplicate creation bug is fixed and prevent regression.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Test Quality And Coverage	⚠️ Warning	PR adds loading states to prevent duplicate flow creation in React components but includes zero test files for this new functionality.	Create test files for TemplatesModal and TemplateGetStartedCardComponent following Jest patterns to verify loading state prevents duplicate calls and UI feedback is correct.
Test File Naming And Structure	⚠️ Warning	No test files were added or modified for the new loading state functionality in TemplateGetStartedCardComponent and TemplatesModal components.	Add .test.tsx files covering loading state transitions, click handler guards, success/failure scenarios, and edge cases like rapid clicks.
Excessive Mock Usage Warning	❓ Inconclusive	No test files found in the repository that correspond to the modified components (TemplateGetStartedCardComponent and TemplatesModal), making it impossible to assess mock usage.	Verify that test files exist for the modified components or clarify if tests are included in this PR.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely describes the main change: adding loading state to prevent duplicate flow creation on click, which is the primary objective of this bug fix.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ 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.}