[Pay meow][$250] "you haven't created any categories" appear for a moment when opening categories in workspace settings

[m-natarajan]

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.1-0 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: @ZhenjaHorbach Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1718993745779499

Action Performed:

1. Open App (It's better to open app with an account that we haven’t used for a long time to be sure that we don't have cache )
2. Tap Account settings -> Workspaces
3. Choose any collect workspace
4. Tap Categories

Expected Result:

List of categories appear

Actual Result:

after opening the workspace categories, an empty state (You haven't created any categories) is displayed instead of a loading state

Workaround:

unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/Expensify/App/assets/38435837/8c7859e7-58e4-483e-b2df-8c8b3e174b3b

https://github.com/Expensify/App/assets/38435837/2adfb2c8-f35d-4ddb-92f4-0f7ca749ab08

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ad610832f3c79921
• Upwork Job ID: 1805471883229818637
• Last Price Increase: 2024-06-25
• Automatic offers:
• rayane-djouah | Reviewer | 102866325
• ZhenjaHorbach | Contributor | 102866327
• dominictb | Contributor | 102961804

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot[bot]]

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

[ZhenjaHorbach]

I reported this issue If necessary, I can help in reviewing proposals

[dominictb]

Proposal

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

after opening the workspace categories, an empty state (You haven't created any categories) is displayed instead of a loading state

What is the root cause of that problem?

• When opening the categories page, there is the case that the policyCategories_ data is not available and API OpenPolicyCategoriesPage is still calling, so the policyCategories_: https://github.com/Expensify/App/blob/2026f62b5074d892163f837ca7b030b84c8e350f/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L60 is undefined initially.
• That leads to the isLoading: https://github.com/Expensify/App/blob/2026f62b5074d892163f837ca7b030b84c8e350f/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L257 is false and shouldShowEmptyState: https://github.com/Expensify/App/blob/2026f62b5074d892163f837ca7b030b84c8e350f/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L259 is true
• So the empty state screen is displayed for a while.

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

• We can update: https://github.com/Expensify/App/blob/2026f62b5074d892163f837ca7b030b84c8e350f/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L257

  const isLoading = !isOffline && (policyCategories === null || policyCategories === undefined);

What alternative solutions did you explore? (Optional)

• We can update: https://github.com/Expensify/App/blob/2026f62b5074d892163f837ca7b030b84c8e350f/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L259

  const shouldShowEmptyState =  policyCategories !== undefined &&  !categoryList.some((category) => category.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) && !isLoading;

or

• When calling API OpenPolicyCategoriesPage, we optimistically set the isLoadingCategories to true (We can store that value to policy_ or policyCategories_).
• Then, we can update: https://github.com/Expensify/App/blob/2026f62b5074d892163f837ca7b030b84c8e350f/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L257

  const isLoading = !isOffline && (policyCategories === null || isLoadingCategories);