fix: resolve cancel button loading state and improve cancel dialog UX #144

Catrya · 2025-07-10T23:12:00Z

fix #132
This PR fixes the issue where, after clicking the Cancel button in the order cancellation modal, the app returned to the previous screen but the Cancel button there remained stuck in a loading state.

Additionally, the modal buttons were updated from Cancel / Confirm to No / Yes to improve UX. The previous labels could be confusing for users canceling an order, as seeing "Cancel" twice might lead them to think they need to cancel the action instead of confirming it.

Summary by CodeRabbit

New Features
- Added "Yes" and "No" options to confirmation dialogs, with support for English, Spanish, and Italian languages.
- Introduced a new button controller for improved management of action button states, allowing external reset of loading indicators.
Improvements
- Confirmation dialogs now use "Yes" and "No" labels for clearer user choices.
- Enhanced action button responsiveness after dialog cancellation.

coderabbitai · 2025-07-10T23:12:06Z

Walkthrough

A controller was introduced for the MostroReactiveButton to externally reset its loading state. The cancel action button in the trade detail screen now uses this controller to reset its state if the user cancels the confirmation dialog. Localization files were updated to include "Yes" and "No" translations for English, Spanish, and Italian.

Changes

File(s)	Change Summary
lib/shared/widgets/mostro_reactive_button.dart	Added `MostroReactiveButtonController` for external state control; updated button to accept controller.
lib/features/trades/screens/trade_detail_screen.dart	Integrated controller with cancel button; updated dialog logic and button labels.
lib/l10n/intl_en.arb, lib/l10n/intl_es.arb, lib/l10n/intl_it.arb	Added "yes"/"no" localization entries for English, Spanish, and Italian.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant TradeDetailScreen
    participant MostroReactiveButton
    participant MostroReactiveButtonController

    User->>TradeDetailScreen: Tap "Cancel" button
    TradeDetailScreen->>User: Show confirmation dialog ("Yes"/"No")
    User->>TradeDetailScreen: Select "No"
    TradeDetailScreen->>MostroReactiveButtonController: Call resetLoading()
    MostroReactiveButtonController->>MostroReactiveButton: resetLoading()
    MostroReactiveButton->>MostroReactiveButton: Reset loading state

Assessment against linked issues

Objective	Addressed	Explanation
Fix cancel button stuck in loading state after modal close (#132)	✅
Update cancel confirmation dialog to use "Yes"/"No" labels (#132)	✅
Ensure cancel button loading state resets if user cancels action in dialog (#132)	✅

Suggested reviewers

grunch

Poem

A button once stuck, now hops free and bright,
With a controller’s touch, it resets just right.
"Yes" or "No" in every tongue,
The modal’s song is newly sung.
🐇✨ No more endless loading—what a delight!

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3bd8e00 and a08b82b.

📒 Files selected for processing (5)

lib/features/trades/screens/trade_detail_screen.dart (3 hunks)
lib/l10n/intl_en.arb (1 hunks)
lib/l10n/intl_es.arb (1 hunks)
lib/l10n/intl_it.arb (1 hunks)
lib/shared/widgets/mostro_reactive_button.dart (4 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

`lib/l10n/intl_{en,es,it}.arb`: Add new localization keys to all three ARB files (en, es, it)

lib/l10n/intl_{en,es,it}.arb: Add new localization keys to all three ARB files (en, es, it)

📄 Source: CodeRabbit Inference Engine (CLAUDE.md)

List of files the instruction was applied to:

lib/l10n/intl_es.arb
lib/l10n/intl_en.arb
lib/l10n/intl_it.arb

`lib/l10n/*.arb`: Use proper ARB metadata for strings with parameters

lib/l10n/*.arb: Use proper ARB metadata for strings with parameters

📄 Source: CodeRabbit Inference Engine (CLAUDE.md)

List of files the instruction was applied to:

lib/l10n/intl_es.arb
lib/l10n/intl_en.arb
lib/l10n/intl_it.arb

`lib/**/*.dart`: Use `S.of(context).yourKey` for all user-facing strings

lib/**/*.dart: Use S.of(context).yourKey for all user-facing strings

📄 Source: CodeRabbit Inference Engine (CLAUDE.md)

List of files the instruction was applied to:

lib/features/trades/screens/trade_detail_screen.dart
lib/shared/widgets/mostro_reactive_button.dart

`**/*.dart`: Remove unused imports and dependencies Use `const` constructors where possible

**/*.dart: Remove unused imports and dependencies
Use const constructors where possible

📄 Source: CodeRabbit Inference Engine (CLAUDE.md)

List of files the instruction was applied to:

lib/features/trades/screens/trade_detail_screen.dart
lib/shared/widgets/mostro_reactive_button.dart

🧠 Learnings (6)

📓 Common learnings

Learnt from: chebizarro
PR: MostroP2P/mobile#74
File: lib/features/trades/models/trade_state.dart:1-15
Timestamp: 2025-05-08T16:06:33.665Z
Learning: In the context of the Mostro Mobile app, the `TradeState` class is specifically constructed using the `tradeStateProvider`. While some fields are nullable (`lastAction` and `orderPayload`), they are still marked as required parameters to ensure they are explicitly considered during state construction.

lib/l10n/intl_es.arb (3)

Learnt from: CR
PR: MostroP2P/mobile#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-08T17:55:04.549Z
Learning: Applies to lib/l10n/intl_{en,es,it}.arb : Add new localization keys to all three ARB files (en, es, it)

Learnt from: CR
PR: MostroP2P/mobile#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-08T17:55:04.549Z
Learning: Applies to lib/l10n/*.arb : Use proper ARB metadata for strings with parameters

Learnt from: CR
PR: MostroP2P/mobile#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-08T17:55:04.549Z
Learning: Test localization changes in all supported languages

lib/l10n/intl_en.arb (2)

Learnt from: CR
PR: MostroP2P/mobile#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-08T17:55:04.549Z
Learning: Applies to lib/l10n/intl_{en,es,it}.arb : Add new localization keys to all three ARB files (en, es, it)

Learnt from: CR
PR: MostroP2P/mobile#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-08T17:55:04.549Z
Learning: Applies to lib/l10n/*.arb : Use proper ARB metadata for strings with parameters

lib/l10n/intl_it.arb (2)

Learnt from: CR
PR: MostroP2P/mobile#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-08T17:55:04.549Z
Learning: Applies to lib/l10n/intl_{en,es,it}.arb : Add new localization keys to all three ARB files (en, es, it)

Learnt from: CR
PR: MostroP2P/mobile#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-08T17:55:04.549Z
Learning: Applies to lib/l10n/*.arb : Use proper ARB metadata for strings with parameters

lib/features/trades/screens/trade_detail_screen.dart (2)

Learnt from: chebizarro
PR: MostroP2P/mobile#74
File: lib/features/trades/models/trade_state.dart:1-15
Timestamp: 2025-05-08T16:06:33.665Z
Learning: In the context of the Mostro Mobile app, the `TradeState` class is specifically constructed using the `tradeStateProvider`. While some fields are nullable (`lastAction` and `orderPayload`), they are still marked as required parameters to ensure they are explicitly considered during state construction.

Learnt from: chebizarro
PR: MostroP2P/mobile#110
File: test/notifiers/take_order_notifier_test.dart:72-74
Timestamp: 2025-06-04T19:35:20.209Z
Learning: MostroService methods like takeBuyOrder() and takeSellOrder() return Future<void> and trigger side effects through other mechanisms rather than direct return values. When testing these methods, focus on verifying method calls and testing state changes through the provider system rather than mocking return values.

lib/shared/widgets/mostro_reactive_button.dart (2)

Learnt from: chebizarro
PR: MostroP2P/mobile#74
File: lib/shared/widgets/mostro_reactive_button.dart:22-32
Timestamp: 2025-05-08T15:39:07.322Z
Learning: In the Mostro Mobile codebase, WidgetStateProperty is used instead of the deprecated MaterialStateProperty for styling buttons with state-dependent properties.

Learnt from: chebizarro
PR: MostroP2P/mobile#74
File: lib/services/mostro_service.dart:70-76
Timestamp: 2025-05-06T15:49:26.443Z
Learning: In the Mostro Mobile codebase, `eventStorageProvider` is exported from `package:mostro_mobile/shared/providers/mostro_service_provider.dart` and not from a separate `event_storage_provider.dart` file.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build

🔇 Additional comments (11)

lib/l10n/intl_en.arb (1)

167-168: LGTM! Clear localization keys for improved dialog UX.

The new "yes" and "no" localization keys provide much clearer dialog options than the previous "Cancel"/"Confirm" pattern, especially in the context of order cancellation where "Cancel" could be ambiguous.

lib/shared/widgets/mostro_reactive_button.dart (4)

11-26: Well-implemented controller pattern for external state management.

The MostroReactiveButtonController follows Flutter best practices with proper lifecycle management through private attach/detach methods. The external resetLoading() method provides a clean interface for resetting button state.

67-71: Proper controller lifecycle management in initState.

The controller attachment in initState ensures the button state can be managed externally once the widget is initialized.

75-75: Good cleanup with controller detachment in dispose.

The controller detachment prevents memory leaks and ensures proper cleanup when the widget is disposed.

80-86: Effective resetLoading implementation.

The resetLoading() method properly resets both loading and success states while canceling any active timeout timer, providing complete state reset functionality.

lib/l10n/intl_it.arb (1)

167-168: Accurate Italian translations for dialog buttons.

The Italian translations "Sì" and "No" are correct and maintain consistency with the English and Spanish versions.

lib/l10n/intl_es.arb (1)

167-168: Correct Spanish translations with proper accentation.

The Spanish translations "Sí" and "No" are accurate and properly accented, maintaining consistency across all supported languages.

lib/features/trades/screens/trade_detail_screen.dart (4)

250-250: Proper controller instantiation for cancel button.

Creating a dedicated controller instance allows external management of the cancel button's loading state, which addresses the core issue described in the PR.

256-284: Excellent async dialog handling with state management.

The implementation correctly addresses the original issue by:

Making the callback async to properly await dialog results

Resetting button loading state when the user cancels the dialog (result != true)

Only proceeding with the cancel action when the user confirms

This ensures the button doesn't remain in a loading state if the user dismisses the dialog.

264-275: Improved dialog UX with clearer button labels.

The updated dialog buttons now use "No" and "Yes" labels from the new localization keys, eliminating the confusion of having "Cancel" appear twice. The dialog properly returns boolean values to indicate user choice.

465-466: Method signature properly updated for controller support.

The _buildNostrButton method signature correctly adds optional Key and MostroReactiveButtonController parameters to support the new functionality.

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

grunch

LGTM

fix: resolve cancel button loading state and improve cancel dialog UX

a08b82b

Catrya requested review from chebizarro and grunch July 10, 2025 23:12

grunch approved these changes Jul 14, 2025

View reviewed changes

grunch merged commit a34c80f into main Jul 14, 2025
2 checks passed

grunch deleted the improve-cancel branch July 14, 2025 19:27

This was referenced Jul 22, 2025

Improve UI: refined modals, added confirmations and missing action buttons #224

Merged

feat: add basic support for PaymentFailure and NextTrade payload types #241

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: resolve cancel button loading state and improve cancel dialog UX #144

fix: resolve cancel button loading state and improve cancel dialog UX #144

Uh oh!

Catrya commented Jul 10, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jul 10, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

grunch left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix: resolve cancel button loading state and improve cancel dialog UX #144

fix: resolve cancel button loading state and improve cancel dialog UX #144

Uh oh!

Conversation

Catrya commented Jul 10, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Assessment against linked issues

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

grunch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Catrya commented Jul 10, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jul 10, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)