[Compose component] - Add loading param to WCOutlinedButton

[AdamGrzybkowski]

Description

As per the request this PR add the loading param to the WCOutlinedButton.

If you do, please also make sure to update WCColoredButton's implementation to pass enabled = enabled && !loading, to make sure we disable button during loading.

I didn't do that, because this changes the button appearance in loading state, here's the comparison:

Current	Disabled

I can do it, but this feels like a bigger decision.

Steps to reproduce

Follow the steps from #14752 to test the button in the app. You can also launch the Preview with all the buttons.

Testing information

The default loading param value is false, so this should be a safe change.

The tests that have been performed

The above.

Images/gif

• I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	ef4a400
	Direct Download	woocommerce-wear-prototype-build-pr14768-ef4a400.apk

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	ef4a400
	Direct Download	woocommerce-prototype-build-pr14768-ef4a400.apk

[hichamboushaba]

Reading the PR description I'm confused with this, I thought you decided to not use this 😕.

I agree with the concern shared in the PR description, so I'm suggesting an alternative in the following patch:

Index: WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Buttons.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Buttons.kt b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Buttons.kt
--- a/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Buttons.kt	(revision ef4a400b1f7c7787e7eb4d471f4adc79b3fb0b27)
+++ b/WooCommerce/src/main/kotlin/com/woocommerce/android/ui/compose/component/Buttons.kt	(date 1760629171929)
@@ -40,6 +40,8 @@
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -190,10 +192,11 @@
     contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
     interactionSource: MutableInteractionSource? = null,
 ) {
+    val loadingState by rememberUpdatedState(loading)
     WCOutlinedButton(
-        onClick = onClick,
+        onClick = { if (!loadingState) onClick() },
         modifier = modifier,
-        enabled = enabled && !loading,
+        enabled = enabled,
         shape = shape,
         colors = colors,
         border = border,
@@ -544,6 +547,7 @@
                     )
                 }
             )
+
         }
     }
 }

WDYT?

[hichamboushaba]

The patch just prevents firing the click event, the click indication (ripple) will still happen, this is not ideal, but I think it's an OK tradeoff if we want to keep the code simple.

[AdamGrzybkowski]

The description was about WCColoredButton. The code above is for WCOutlinedButton - I'm not breaking any behavior as this is something new.

[hichamboushaba]

I see, I misunderstood the remark in the PR description, but still I think the remark applies to WCOutlinedButton too, as disabling the button causes using a different color for the progress indicator:

For bookings, this is not an issue because we override the content color locally, but anywhere where might want to use the same pattern with WCOutlinedButton, it will have the gray color, and won't match the app theme.
So I think we should still consider changing this, WDYT?

[codecov-commenter]

Codecov Report

❌ Patch coverage is 0% with 31 lines in your changes missing coverage. Please review.
✅ Project coverage is 38.29%. Comparing base (d0c3f31) to head (ef4a400).
⚠️ Report is 26 commits behind head on trunk.

Files with missing lines	Patch %	Lines
...oocommerce/android/ui/compose/component/Buttons.kt	0.00%	29 Missing ⚠️
...d/ui/bookings/compose/BookingAppointmentDetails.kt	0.00%	2 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk   #14768      +/-   ##
============================================
- Coverage     38.30%   38.29%   -0.01%     
- Complexity    10018    10019       +1     
============================================
  Files          2118     2118              
  Lines        118558   118569      +11     
  Branches      15831    15835       +4     
============================================
+ Hits          45409    45411       +2     
- Misses        68930    68940      +10     
+ Partials       4219     4218       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[wpmobilebot]

Version 23.5 has now entered code-freeze, so the milestone of this PR has been updated to 23.6.

[hichamboushaba]

Thanks for taking care of this @AdamGrzybkowski, I'm pre-approving, but please check my comment about the enabled = enabled && !loading.

[hichamboushaba]

I see, I misunderstood the remark in the PR description, but still I think the remark applies to WCOutlinedButton too, as disabling the button causes using a different color for the progress indicator:

For bookings, this is not an issue because we override the content color locally, but anywhere where might want to use the same pattern with WCOutlinedButton, it will have the gray color, and won't match the app theme.
So I think we should still consider changing this, WDYT?