[$250] Bulk deleted categories reappear.

[m-natarajan]

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:
Reproducible in staging?: need reproduction
Reproducible in production?: need reproduction
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @trjExpensify
Slack conversation (hyperlinked to channel name): Expensify - Convert

Action Performed:

Be on a slow network 3g

1. Go to workspace setting
2. Select category
3. Bulk select the categories
4. Delete all the categories

Expected Result:

Deleted categories should not reappear

Actual Result:

Deleted categories reappear

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

2024-11-22_00-46-04.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861090857183886137
• Upwork Job ID: 1861090857183886137
• Last Price Increase: 2024-12-02

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @justinpersaud (AutoAssignerNewDotQuality)

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[melvin-bot]

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

[melvin-bot]

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

[justinpersaud]

Just leaving a note here that I'm going to be OOO starting tomorrow until Dec 9th. If anything requires engineering before then and I'm not around, feel free to reassign.

[melvin-bot]

@justinpersaud, @sakluger, @Pujan92 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[muttmuure]

@Pujan92 any ideas on this one?

[zirgulis]

Hi, I'm Povilas from Callstack and I would like to work on this issue.

[melvin-bot]

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

[sakluger]

Thanks @zirgulis! I've assigned you to the issue. Please let us know once you have a proposal for how to fix the issue.

[zirgulis]

@sakluger it's very difficult to reproduce this bug reliably, it seems to happen randomly. I've managed to only reproduce this a couple of times, not sure what are the exact steps to reproduce this. It might take quite some time to fully understand what's going on here. I have noticed an error in the browser console coming from onyx that it's not able to set policyCategories_ will keep investigating this

[sakluger]

Cool, thanks for the update @zirgulis. Keep us updated as you investigate!

[melvin-bot]

@justinpersaud @sakluger @Pujan92 @zirgulis 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!

[zirgulis]

@sakluger It seems that the issue here is that the SelectionListWithModal component which is rendering the list items for categories is optimized to incrementally update the list items. In the end of the video (attached in the issue description) we see some not deleted categories appear a few seconds later. I was not able to fully replicate the part where old categories appear and then disappear, but we can see that the items are rendered in batches, which I think caused the glitch described in this issue:

Screen.Recording.2024-12-09.at.11.49.09.mp4

[zirgulis]

@sakluger For web and desktop platforms, we could try to increase the values of windowSize and updateCellsBatchingPeriod props similarly as in the Search.tsx component. It would render more items in a single render batch, therefore we wouldn't see these slow UI updates. The drawback here is it would also increase the memory usage and would also take longer for the list items to be interactive, that's why it would make the most sense to do this only on web and desktop.

[sakluger]

we can see that the items are rendered in batches, which I think caused the glitch described in this issue

@zirgulis That doesn't completely make sense to me. If this was a batch rendering issue, I would think that would just cause some of the categories to take longer to be deleted. Are you saying that when you delete a large set of categories, it splits that operation up into batches and we only complete some of the batches?

[zirgulis]

@sakluger we do delete the categories successfully, but after deleting them we render (display) the remaining categories in batches. This is a rendering issue and not related to data flow.

[muttmuure]

Sounds like a promising lead to me

[muttmuure]

Can you create a proposal using the template?

[zirgulis]

@muttmuure

Problem:

In the WorkspaceCategoriesPage users are experiencing visual glitches in the SelectionListWithModal component where:

• previously deleted items briefly reappear
• not deleted items are appearing slowly.

Root Cause:

The root cause appears to be suboptimal React Native list configuration parameters:

• A small windowSize (5) is causing too frequent reconstruction of the visible window

App/src/components/SelectionList/BaseSelectionList.tsx

Line 102 in 33ce301

windowSize = 5,

• A short updateCellsBatchingPeriod (50ms) is not providing enough time to properly batch and process updates

App/src/components/SelectionList/BaseSelectionList.tsx

Line 103 in 33ce301

updateCellsBatchingPeriod = 50,

• The combination of these settings leads to inefficient render cycles during item deletion, causing the list to momentarily display stale data

Proposed Changes:

• Add a check to distinguish web and desktop platforms. Code line to be added
• Increase windowSize from 5 to 50 to maintain a larger buffer of rendered items (pass as a SelectionListWithModal prop) Code line to be added
• Extend updateCellsBatchingPeriod from 50ms to 100ms to allow proper batching of updates (pass as a SelectionListWithModal prop) Code line to be added

Important: this should be done only for web and desktop platforms as this can increase the memory usage.

Tests:
There could be an automated test introduced to measure proper render times after the categories are deleted

[sakluger]

Thanks @zirgulis! Could you please update your proposal to link directly to the files that would change? Here is a good example of a recent proposal that we selected: #53346 (comment).

[zirgulis]

@sakluger I think this commit will showcase the best what I want to change callstack-internal@0849f99

[sakluger]

Thanks @zirgulis. We ask everyone to follow the same template when making proposals. If you'd like us to consider your proposal, could you please update your existing comment to match the template? The comment I linked above is a good example of a proposal that uses the required template.

[zirgulis]

@sakluger I have updated my proposal comment, could you please verify that I'm not missing anything anymore? I was not able to paste the code lines to be changed as permalinks because it's from the other repository (our own fork). Instead I added them as links