[$500] Web- Delay when change default skin color

[lanitochka17]

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

---

Version Number: 1.4.31-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Open any conversation
3. Click on Emoji button> Change default skin color
4. Select other skin color than default one

Expected Result:

Selected skin color should be instantly changed when user select it

Actual Result:

There is a delay when change default skin color

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6353761_1706128951219.Recording__1909.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0162088f4af81577d8
• Upwork Job ID: 1750265626674102272
• Last Price Increase: 2024-01-31
• Automatic offers:
• tienifr | Contributor | 0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0162088f4af81577d8

[melvin-bot]

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

[melvin-bot]

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

[lanitochka17]

We think that this bug might be related to #vip-vsp
CC @quinthar

[paultsimura]

Proposal

Please re-state the problem that we are trying to solve in this issue.

There is a delay when changing the default skin tone.

What is the root cause of that problem?

When selecting the default skin tone, we first hide the skin tone selector, and then it gets updated async:

App/src/components/EmojiPicker/EmojiSkinToneList.js

Lines 25 to 33 in 4db7b09

	/**
	* Set the preferred skin tone in Onyx and close the skin tone picker
	* @param {object} skinToneEmoji
	*/
	function updateSelectedSkinTone(skinToneEmoji) {
	toggleIsSkinToneListVisible();
	setHighlightedIndex(skinToneEmoji.skinTone);
	setPreferredSkinTone(skinToneEmoji.skinTone);
	}

This emoji skin tone uses the Onyx context, so the value is changed only when the value in Onyx is changed, and this operation takes some time (even the optimistic change), which causes the delay between choosing the tone and displaying it as default:

App/src/hooks/usePreferredEmojiSkinTone.ts

Lines 5 to 20 in f418753

	export default function usePreferredEmojiSkinTone() {
	const preferredSkinTone = useContext(PreferredEmojiSkinToneContext);
	const updatePreferredSkinTone = useCallback(
	(skinTone: number) => {
	if (Number(preferredSkinTone) === Number(skinTone)) {
	return;
	}
	User.updatePreferredSkinTone(skinTone);
	},
	[preferredSkinTone],
	);
	return [preferredSkinTone, updatePreferredSkinTone];
	}

What changes do you think we should make in order to solve the problem?

When updating the skin tone, we should hide the skin tone selector after it's been set (after interactions):

    function updateSelectedSkinTone(skinToneEmoji) {
        setHighlightedIndex(skinToneEmoji.skinTone);
        setPreferredSkinTone(skinToneEmoji.skinTone);
        InteractionManager.runAfterInteractions(() => {
            toggleIsSkinToneListVisible();
        });
    }

Result:

Screen.Recording.2024-01-24.at.22.44.44.mov

What alternative solutions did you explore? (Optional)

Alternatively, we can use a local state along with the one passed from usePreferredEmojiSkinTone and update it immediately without waiting for the Onyx update, but it will bring more unnecessary complexity to the emoji picker logic.

[mubeenhassan]

Proposal

Please re-state the problem that we are trying to solve in this issue.
delay in emoji toggle
What is the root cause of that problem?
The delay is attributed to the use of the usePreferredEmojiSkinTone hook.

App/src/components/EmojiPicker/EmojiSkinToneList.js

Line 19 in 4db7b09

const [preferredSkinTone, setPreferredSkinTone] = usePreferredEmojiSkinTone();

What changes do you think we should make in order to solve the problem?
just change usePreferredEmojiSkinTone to useState hook will solve the problem

Result

Screen.Recording.2024-01-25.at.3.01.47.AM.mov

[melvin-bot]

📣 @mubeenhassan! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[mubeenhassan]

Contributor details
Your Expensify account email: mubeenhassan34@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01a5c57bf278a77749

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

There is a delay when change default skin color

What is the root cause of that problem?

We're updating the skinTone and hide the list at the same time

App/src/components/EmojiPicker/EmojiSkinToneList.js

Lines 30 to 32 in 0d0b0a8

	toggleIsSkinToneListVisible();
	setHighlightedIndex(skinToneEmoji.skinTone);
	setPreferredSkinTone(skinToneEmoji.skinTone);

But preferredSkinTone is synced from Onyx so it takes quite long time to update.

What changes do you think we should make in order to solve the problem?

We should hide the list when preferredSkinTone is updated

function updateSelectedSkinTone(skinToneEmoji) {
        setHighlightedIndex(skinToneEmoji.skinTone);
        setPreferredSkinTone(skinToneEmoji.skinTone);
    }

    useEffect(()=>{
        if(!isSkinToneListVisible){
            return;
        }
        toggleIsSkinToneListVisible();
    },[preferredSkinTone])

What alternative solutions did you explore? (Optional)

We can introduce the new variable named shouldToggleMenuListRef to indicate whether we should hide the list or not

    const shouldToggleMenuList = useRef(false);

    function updateSelectedSkinTone(skinToneEmoji) {
        shouldToggleMenuList.current=true
        setHighlightedIndex(skinToneEmoji.skinTone);
        setPreferredSkinTone(skinToneEmoji.skinTone);
    }

    useEffect(()=>{
        if(!isSkinToneListVisible || !shouldToggleMenuList.current){
            return;
        }
        shouldToggleMenuList.current=false
        toggleIsSkinToneListVisible();
    },[preferredSkinTone])

[sakluger]

I added. this issue to #vip-vsb as a low priority item, but I do think we should fix it now if we can.

@rushatgabhane what do you think of the proposals we're gotten so far?

[rushatgabhane]

reviewing

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[rushatgabhane]

I like @tienifr's proposal
🎀 👀 🎀 c+ reviewed

[melvin-bot]

Triggered auto assignment to @youssef-lr, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

@sakluger @youssef-lr @rushatgabhane this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[youssef-lr]

@sakluger this doesn't seem too bad a of a bug, given that most users will change this setting only once, I think we can :donothing: here. What do you think?

[sakluger]

@youssef-lr you're probably right that it's low-impact. But we've been fixing other delay issues, and there's already a C+ recommended proposal, so I think we should fix it.

[youssef-lr]

Sounds good!

[melvin-bot]

📣 @tienifr 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[youssef-lr]

Waiting for a PR from @tienifr

[melvin-bot]

@sakluger @youssef-lr @rushatgabhane @tienifr this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[tienifr]

Working on PR now.

[tienifr]

@sakluger PR hit production. Melvin is malfunctioning. Please add HOLD for payment label.

[rushatgabhane]

payment request here - https://staging.new.expensify.com/r/323761154428333

[rushatgabhane]

@sakluger could you please attach payment summary 🙇

[JmillsExpensify]

Awaiting payment summary from @sakluger

[tienifr]

@JmillsExpensify Can you help set the Daily label to this issue? Otherwise @sakluger might not see it as it's Weekly now

[JmillsExpensify]

I reached out to him via DM.

[sakluger]

Sorry, everyone - the payment summary is below.

Summarizing payment on this issue:

Contributor: @tienifr $500, paid via Upwork
Contributor+: @rushatgabhane $500, please request on Newdot

[JmillsExpensify]

$500 approved for @rushatgabhane