[native] introduce loading logic to relationship prompt button
Needs ReviewPublic
Actions

Authored by ginsu on Thu, Jun 27, 1:02 PM.

Details

Reviewers

inka
ashoat

Summary

Broke introducing loading logic to native relationship prompt button into two. For some reason on native we have two separate "buttons" that handle relationship actions. We have a dedicated RelationshipButton component that is used in the user profiles and we have some inline buttons that we created in the RelationshipPrompt component. Rather than have two separate approaches for the relationship prompt buttons we should consolidate them and just reuse RelationshipButton for both.

This first diff (this one) introduces the loading logic to the relationship prompt button. The second diff will update the RelationshipPrompt component to use the RelationshipButton component instead of the inline button components it currently use

This diff also introduces other logic so that RelationshipButton can be better reused in both places

Depends on D12595

Test Plan

Confirmed that the relationship prompt buttons in the user profile show a loading spinner when the action is in progress

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.Thu, Jun 27, 1:02 PM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptThu, Jun 27, 1:02 PM

Harbormaster completed remote builds in B29969: Diff 41768.Thu, Jun 27, 1:18 PM

ginsu requested review of this revision.Thu, Jun 27, 1:18 PM

ginsu retitled this revision from [native] intorduce loading logic to relationship prompt button to [native] introduce loading logic to relationship prompt button.Thu, Jun 27, 1:19 PM

ginsu edited the summary of this revision. (Show Details)

ginsu added reviewers: inka, ashoat.

ginsu added a parent revision: D12595: [web] intorduce loading logic to relationship prompt button.

ginsu added inline comments.Thu, Jun 27, 1:44 PM

native/components/relationship-button.react.js
10	Introduced this new type with intention that this can be extended in the future with new sizes (M, L, XL, etc)
69	If these copy changes are good, will make sure I dedup the copy + pasted strings with D12595 before landing
93	Made the icon a bit smaller. It felt a little too big for me + looked a better with a smaller icon imo, but happy to change it back if people disagree Before: After:
native/user-profile/user-profile-relationship-button.react.js
99	The new small size makes the font of the button text a bit smaller so that we can fit all the elements nicely in the button Before: After:
158	Hardcoded the height here so that we guarantee that when the button state goes to loading then the height of the button never changes; however, recently got some feedback about hardcoding the height in CSS being a no-no. Looks like `visibility: hidden` is not supported in react native, but if we still don't want this, I can explore other ways of doing this This height was determined by using the element inspector in my simulator