It's unclear in the video what happens when you save.

Does the modal stay open while it saves? In that case, I wonder if the pending state variables should default to undefined (wondering how we differentiate pending state vs pending-save state). Also wondering how we'll disable buttons while the save is ongoing.

If the modal closes immediately, then I'm wondering about the pending save state in the ProfileScreen, eg. do we optimistically display the new avatar, or display some loading indicator, etc.

Nice! Might be worth syncing with Ted... ideally this stuff is covered in designs and you don't have to "wing out", and I don't have to call out the UX issues.

Separately, can you clarify where the loading indicator will be displayed? We could potentially put it inside the button, but worth asking Ted about all of this.

Separately, can you clarify where the loading indicator will be displayed?

Just synced with Ted and he says he would like the loading indicator to be displayed on top of the avatar component (like what we will do with image avatars)

Ted also suggested that we should automatically navigate the user back when the avatar is saved successfully. He said otherwise, the feedback we give back to users when the avatar is saved is not very clear. Alternatively, he said a toast component could work. However, I think building the toast will take some time and shouldn't be a priority rn

However, I think building the toast will take some time and shouldn't be a priority rn

You can actually just call displayActionResultModal("string") to use our existing "toast" functionality. It doesn't look like that design but it's easy to use and better than nothing

You can actually just call displayActionResultModal("string") to use our existing "toast" functionality. It doesn't look like that design but it's easy to use and better than nothing

Awesome I'll give that a try

Addressing all the feedback for the saving avatar UX made this diff very large. I will split this diff into two to make it easier to review. This diff will handle purely all the UI and frontend user interactions (visual layout, picking a new emoji, picking a new color, and resetting the avatar), and the next diff will handle all the behavior when a user hits save (displaying a loading state, saving the avatar, and showing an error or success depending on the results of the response)