[HOLD for payment 2024-12-12] [HOLD for payment 2024-12-03] [$250] iOS Search - Folder background in the empty state disappears after switching tabs

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.55-6
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: N/A
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• Account has no expenses

1. Launch ND or hybrid app
2. Go to Search
3. Switch between different expense status tab

Expected Result:

The folder background in the empty state will not disappear after switching tabs

Actual Result:

The folder background in the empty state disappears after switching tabs

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6650055_1730274333404.ScreenRecording_10-30-2024_15-42-31_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021852040650047940888
• Upwork Job ID: 1852040650047940888
• Last Price Increase: 2024-10-31

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

Triggered auto assignment to @garrettmknight (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.

[lanitochka17]

@garrettmknight 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

[lanitochka17]

We think that this bug might be related to #wave-control

[SzymczakJ]

I'm able to reproduce, feel free to assign me, as I can work on it.

[SzymczakJ]

FYI I'll OOO on Friday and Monday.
I've looked into this bug but it seems really strange and I'll probably have to consult the big brains in SWM open-source team to solve this 😄

[melvin-bot]

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

[melvin-bot]

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

[UltraneDevelopment]

Issue Summary
The folder background disappears in the empty state when switching between different expense status tabs. This issue is currently isolated to iOS (both Standalone and HybridApp), while it works as expected on other platforms.

Proposed Solution

1. Component State Persistence:

• Ensure that the component responsible for rendering the empty state background maintains its visibility state across tab switches.

• Implement persistent state management (using a method such as useState or useRef), so the background doesn’t reset or disappear when changing tabs.

2. Force Component Re-render on Tab Switch:

• On iOS, React Native components sometimes need to be explicitly updated during tab switches. By using key or a similar identifier, we can trigger a re-render of the background component, making sure it persists through each tab switch.

• This will ensure that the background component is rendered consistently across tabs, preventing visibility loss.

3. Platform-Specific Styling or Rendering:

• Since the issue is iOS-specific, conditional logic (e.g., Platform.OS === 'ios') can be applied to re-render the background component on tab switches solely for iOS, preserving the behaviour across Android and web.

4. Testing and Validation:

• After implementing this solution, I would conduct extensive testing on all affected iOS platforms (Standalone and Hybrid) to verify that the background persists.
• I’d also test on Android and web to ensure there are no regressions or unintended changes.

[melvin-bot]

📣 @UltraneDevelopment! 📣
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>

[melvin-bot]

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

[UltraneDevelopment]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~0152633cd2e0038e15

[melvin-bot]

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

[SzymczakJ]

I've looked into this issue with @WoLewicki and here's our update:

• the problem is caused by recycling views that react native is doing on iOS to be more performant. It recycles faulty views that for some reason don't show the background, even though it's properly set,
• the faulty views are coming from react-content-loader library, as when we comment the components coming from this library the problem is not longer reproducible,
• we have a workaround for this to just turn off view recycling on iOS native side, but it will come with it's costs, as it will bring performance down
• as the workaround presented above is not ideal, we will dig deeper to fix the root cause, which is probably located in react-content-loader library

[mananjadhav]

Okay. @garrettmknight if this is handled by the agency should we remove the "Help Wanted" label?

[SzymczakJ]

No update, I had to prioritise other task(migration of react-native-live-markdown to npm), but I'll work on it tomorrow.

[SzymczakJ]

Bug is complicated, I think we can rule out the react-content-loader, as even overriding the return value of this library to null doesn't fix the bug. I'll continue to work on this on Tuesday, because Monday is bank holiday in Poland.

[melvin-bot]

@garrettmknight, @mananjadhav, @SzymczakJ Huh... This is 4 days overdue. Who can take care of this?

[SzymczakJ]

PR ready for review, I think now it will be robust enough to cover all edgecases.

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @mananjadhav owed $250 via NewDot
• Contributor: @SzymczakJ is from an agency-contributor and not due payment

BugZero Checklist (@garrettmknight)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1852040650047940888/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[garrettmknight]

@mananjadhav please complete the checklist and submit for payment.

[mananjadhav]

We had to push a second PR to fix this, which was just deployed to staging yesterday. The payout date will be based on this new PR #53199

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.71-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix disappearing background on Search page #53199

If no regressions arise, payment will be issued on 2024-12-12. 🎊

For reference, here are some details about the assignees on this issue:

• @mananjadhav requires payment through NewDot Manual Requests
• @SzymczakJ does not require payment (Contractor)

[melvin-bot]

@mananjadhav @garrettmknight @mananjadhav The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @mananjadhav owed $250 via NewDot
• Contributor: @SzymczakJ is from an agency-contributor and not due payment

BugZero Checklist (@garrettmknight)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1852040650047940888/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[mananjadhav]

@garrettmknight This was more of a workaround solution with no exact offending PR. Should we skip the checklist for this one? What do you think of adding a regression test for this one?

Regression Test Proposal

1. Open the app with no expenses or chats.
2. Go to the search page
3. You should see a search folder animation icon.
4. Switch between different tabs (expense statuses).
5. Ensure the search folder animation is visible. Switch between the tabs atleast a few mins.

[mananjadhav]

@garrettmknight quick bump on this one.

[garrettmknight]

All set - request payment when you're ready!

[mananjadhav]

Thanks for the prompt action. I've already raised it here.

[JmillsExpensify]

Payment summary: $250 @mananjadhav for PR review and testing

[mananjadhav]

Thanks @JmillsExpensify. Quick question, do we need an explicit comment from the BZ member? or checklist from bot comment is enough?

[garrettmknight]

So long as the checklist has been completed by BZ we're good.

[mananjadhav]

Okay cool then. I've already raised the request on NewDot.

[garrettmknight]

$250 approved for @mananjadhav