This diff introduces the loading logic to the relationship prompt button.
Depends on D12595
Details
Details
Confirmed that the relationship prompt buttons in the user profile show a loading spinner when the action is in progress
Loading state:
Non loading state:
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Lint
No Lint Coverage - Unit
No Test Coverage
Event Timeline
| native/components/relationship-button.react.js | ||
|---|---|---|
| 10 ↗ | (On Diff #41768) | Introduced this new type with intention that this can be extended in the future with new sizes (M, L, XL, etc) |
| 69 ↗ | (On Diff #41768) | If these copy changes are good, will make sure I dedup the copy + pasted strings with D12595 before landing |
| 93 ↗ | (On Diff #41768) | 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 ↗ | (On Diff #41768) | 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 ↗ | (On Diff #41768) | 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 |
| native/components/relationship-button.react.js | ||
|---|---|---|
| 69 ↗ | (On Diff #41768) | I don't like the new, longer strings.
|
| native/user-profile/user-profile-relationship-button.react.js | ||
| 158 ↗ | (On Diff #41768) | Let's remove this. The underlying issue is that the button changes height when loading. The button changes height because one thing is unrendered (text) and another thing is rendered instead (spinner). We should make the following changes:
|
| 169 ↗ | (On Diff #41768) | Same here |
| native/components/relationship-button.react.js | ||
|---|---|---|
| 42 ↗ | (On Diff #41923) | Feels like there's some duplication of the ButtonContentContainer stuff you also have in D12600. What do you think of my suggestion there to factoring some of the logic out so it can be reused here? |
| 70–80 ↗ | (On Diff #41923) | Nit: personally I don't love this use of ternary syntax. See point 3 here |