[HOLD for payment 2024-11-20] [$250] Android - Emoji Picker - Empty categories seen for a second before search results appear

[IuliiaHerets]

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: 9.0.52-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5113917&group_by=cases:section_id&group_order=asc&group_id=306201
Issue reported by: Applause Internal

Action Performed:

1. Open the Expensify app.
2. Open any chat.
3. Open the emoji picker.
4. Scroll down to another emoji category.
5. Add a letter in the search input.
6. Verify that results for that added letter are automatically displayed.

Expected Result:

For every letter that the user adds on search input, results in emoji picker should be updated automatically.

Actual Result:

When the user opens emoji picker, scrolls down some categories and add a letter in search input, empty categories are displayed for a second, before search results appear.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6642739_1729651697797.Search_Emoji.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021849276129411424515
• Upwork Job ID: 1849276129411424515
• Last Price Increase: 2024-10-24
• Automatic offers:
• dominictb | Reviewer | 104727667
• huult | Contributor | 104727668

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@jliexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[jliexpensify]

@IuliiaHerets please re-test on 52-4 and share a new video if you think it's a bug/re-open this GH.

I'm not seeing this behaviour, I think it's fixed.

[IuliiaHerets]

@jliexpensify QA team can reproduce this issue in the latest build on such devices: Realmi C67/Android 14 and Motorola Moto G60/Android 12

screen-20241023-141041.mp4

[shahinyan11]

Proposal

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

Android - Emoji Picker - Empty categories seen for a second before search results appear

What is the root cause of that problem?

Here we scroll emojis list to the top when search input changes. As that the FlatList operates with lazy loading when we set scroll offset to 0 the content disappears in a short time

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

Move this code into the useEffect hook and add filteredEmojis to the dependencies array.

useEffect(() => {
    if (!emojiListRef.current) return
    
    emojiListRef.current.scrollToOffset({offset: 0, animated: false});
}, [filteredEmojis]);

...

const filterEmojis = lodashDebounce((searchTerm: string) => {
    const [normalizedSearchTerm, newFilteredEmojiList] = suggestEmojis(searchTerm);

    if (normalizedSearchTerm === '') {
        setFilteredEmojis(allEmojis);
        setHeaderIndices(headerRowIndices);
        return;
    }

    setFilteredEmojis(newFilteredEmojiList ?? []);
    setHeaderIndices([]);
}, 300);

OPTIONAL: I noticed that we use debounce technique for filterEmojis function. I suggest to avoid from debounce and use useDeferredValue hook instead. You can check out the benefit of useDeferredValue from Debouncing at the very end of this article

What alternative solutions did you explore? (Optional)

[jliexpensify]

QA team can reproduce this issue in the latest build on such devices: Realmi C67/Android 14 and Motorola Moto G60/Android 12

I'm not seeing it on my Pixel 7, but I've been told Android issues differ between phones, so its possible that Asian phones and Moto phones are more affected.

I'll put this as External and see if we can get C+ to repro

[melvin-bot]

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