[native] Don't show loading spinner during avatar server call in registration screen
AbandonedPublic
Actions

Authored by ashoat on Jun 8 2023, 6:56 AM.

Details

Reviewers

atul
ginsu

Summary

We already have a loading spinner on the button, and it feels unexpected for the avatar spinner to randomly appear some time after the user presses the button (after the registration server call concludes and the avatar one starts).

Depends on D8150

Test Plan

The whole stack was tested as follows:

Try creating an account with the default avatar
Try creating an account with an emoji avatar
Try creating an account with an image avatar (that needs to be uploaded)
Try creating an Ethereum account with an ENS avatar

I made sure of the following:

Loading spinner appeared on the button, not on the avatar, and was present throughout
After the RegistrationNavigator is dismissed, the avatar that appears for the user's PRIVATE chat in the ChatThreadList is correct
Subsequent delete-account-and-then-register-again worked correctly
Various error cases are triggered correctly

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ashoat created this revision.Jun 8 2023, 6:56 AM

Herald added a subscriber: tomek. · View Herald TranscriptJun 8 2023, 6:56 AM

ashoat added a child revision: D8152: [native] Set user avatar after registering in registration flow.Jun 8 2023, 6:57 AM

Harbormaster completed remote builds in B20111: Diff 27555.Jun 8 2023, 7:12 AM

ashoat requested review of this revision.Jun 8 2023, 7:12 AM

Following D8163, we no longer do the server call from AvatarSelection, so this diff is no longer necessary

ashoat removed a parent revision: D8150: [native] Make callback param optional in useUploadSelectedMedia avatar hook.Jun 9 2023, 12:20 PM

ashoat removed a child revision: D8152: [native] Set user avatar after registering in registration flow.

Revision Contents
Changeset List

Path

Size

native/

account/

registration/

avatar-selection.react.js

1 line

avatars/

edit-user-avatar.react.js

5 lines

Diff 27555

View Options

native/account/registration/avatar-selection.react.js

Show First 20 Lines • Show All 48 Lines • ▼ Show 20 Lines	): React.Node {
const onPressSidebar = useAnimatedNavigateToSidebar(route.params.item);		const onPressSidebar = useAnimatedNavigateToSidebar(route.params.item);
const renderSidebarIcon = React.useCallback(		const renderSidebarIcon = React.useCallback(
style => (		style => (
<SWMansionIcon name="message-circle-lines" style={style} size={16} />		<SWMansionIcon name="message-circle-lines" style={style} size={16} />
),		),
[],		[],
);		);

		const { item } = route.params;
		const { messageInfo } = item;
		inkaUnsubmitted Done Inline Actions can't this be `const { messageInfo } = route.params.item;`? I don't think you use `item` anywhere afterwards inka: can't this be `const { messageInfo } = route.params.item;`? I don't think you use `item`…

		const onPressEdit = () => {
		invariant(
		inputState,
		'inputState should be set in TextMessageTooltipModal.onPressEdit',
		);
		inputState.setEditedMessageID(messageInfo.id);
		};
		inkaUnsubmitted Done Inline Actions Shouldn't this be inside React.useCallback? inka: Shouldn't this be inside React.useCallback?
		const renderEditIcon = React.useCallback(
		style => <SWMansionIcon name="edit-1" style={style} size={16} />,
		[],
		);

const onPressCopy = React.useCallback(() => {		const onPressCopy = React.useCallback(() => {
Clipboard.setString(text);		Clipboard.setString(text);
setTimeout(confirmCopy);		setTimeout(confirmCopy);
}, [text]);		}, [text]);
const renderCopyIcon = React.useCallback(		const renderCopyIcon = React.useCallback(
style => <SWMansionIcon name="copy" style={style} size={16} />,		style => <SWMansionIcon name="copy" style={style} size={16} />,
[],		[],
);		);
Show All 16 Lines	<>
<TooltipItem		<TooltipItem
id="sidebar"		id="sidebar"
text="Thread"		text="Thread"
onPress={onPressSidebar}		onPress={onPressSidebar}
renderIcon={renderSidebarIcon}		renderIcon={renderSidebarIcon}
key="sidebar"		key="sidebar"
/>		/>
<TooltipItem		<TooltipItem
		id="edit"
		text="Edit"
		onPress={onPressEdit}
		renderIcon={renderEditIcon}
		key="edit"
		/>
		<TooltipItem
id="copy"		id="copy"
text="Copy"		text="Copy"
onPress={onPressCopy}		onPress={onPressCopy}
renderIcon={renderCopyIcon}		renderIcon={renderCopyIcon}
key="copy"		key="copy"
/>		/>
<TooltipItem		<TooltipItem
id="report"		id="report"
Show All 17 Lines