[HOLD for payment 2022-11-11] [$250] Pay button is briefly hidden by loading spinner

[Julesssss]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

CC @luacmartins as we discussed this, but feel free to unassign

Action Performed:

• Login as a user that has received an IOU request
• Open the chat that contains the IOU Request
• Tap the IOURequest

Expected Result:

• The pay button should immediately display

Actual Result:

• The pay button is temporarily hidden behind a loading spinner

Platform:

• Web: ✅
• iOS: ✅
• Android: ✅
• Desktop App: ✅
• Mobile Web: ✅

Version Number: v1.2.21-4
Reproducible in staging?: Yes
Reproducible in production?: Yes
Notes/Photos/Videos: Look below
Issue reported by: @Julesssss

Screen.Recording.2022-10-28.at.14.20.30.mov

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @sakluger (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)

[melvin-bot]

Current assignees @Julesssss and @luacmartins are eligible for the External assigner, not assigning anyone new.

[hungvu193]

Proposal
Actually we are waiting for payment method then decide to show the button:

App/src/components/KYCWall/BaseKYCWall.js

Lines 144 to 146 in 84aa9c8

	{this.props.isLoadingPaymentMethods && !this.props.isDisabled
	? (<ActivityIndicator color={themeColors.spinner} size="large" />)
	: this.props.children(this.continue)}

Solution
To fix this we can remove the condition here in BaseKYCWall.js

App/src/components/KYCWall/BaseKYCWall.js

Lines 144 to 146 in 84aa9c8

	{this.props.isLoadingPaymentMethods && !this.props.isDisabled
	? (<ActivityIndicator color={themeColors.spinner} size="large" />)
	: this.props.children(this.continue)}

-{this.props.isLoadingPaymentMethods && !this.props.isDisabled
-                    ? (<ActivityIndicator color={themeColors.spinner} size="large" />)
-                    : this.props.children(this.continue)}
+      { this.props.children(this.continue)}

But I think we wait for the payment method is fine, we don't need to fix this imo.

Screen.Recording.2022-10-28.at.23.19.21.mov

[Julesssss]

I think we can still improve this. Users can always mark paid, so lets show the button, and update it with the alternate payment method.

[0xmiroslav]

@Julesssss how about this approach to show loading on button while getting payment methods?

demo1.mov

demo2.mp4

If this looks good, here's my proposal:

https://github.com/Expensify/App/blob/main/src/components/KYCWall/BaseKYCWall.js#L144-L146

-               {this.props.isLoadingPaymentMethods && !this.props.isDisabled
-                   ? (<ActivityIndicator color={themeColors.spinner} size="large" />)
-                   : this.props.children(this.continue)}
+               {this.props.children(this.continue, this.props.isLoadingPaymentMethods)}

https://github.com/Expensify/App/blob/main/src/components/SettlementButton.js#L89-L92

-               {triggerKYCFlow => (
+               {(triggerKYCFlow, isLoadingPaymentMethods) => (
                    <ButtonWithMenu
                        isDisabled={this.props.isDisabled || this.props.network.isOffline}
-                       isLoading={this.props.isLoading}
+                       isLoading={this.props.isLoading || isLoadingPaymentMethods}