[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
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

2024-06-21.20.28.20.mov

Recording.238.mp4

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]

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_:
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Line 60 in 2026f62

  const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyId}`);

  
  is undefined initially.
• That leads to the isLoading:
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Line 257 in 2026f62

  const isLoading = !isOffline && policyCategories === null;

  
  is false
  and shouldShowEmptyState:
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Line 259 in 2026f62

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

  
  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:
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Line 257 in 2026f62

  const isLoading = !isOffline && policyCategories === null;

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

What alternative solutions did you explore? (Optional)

• We can update:
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Line 259 in 2026f62

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

    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:
  

  App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

  Line 257 in 2026f62

  const isLoading = !isOffline && policyCategories === null;

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

[devguest07]

Proposal

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

"you haven't created any categories" appear for a moment when opening categories in workspace settings

What is the root cause of that problem?

From an old account or one without cached data, sometimes we open the category page and the data is not loaded yet.

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 60 in 34a8022

const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyId}`);

This leads to a wrong value on isLoading.

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 257 in 34a8022

const isLoading = !isOffline && policyCategories === null;

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

As per the code pattern in the app, we need to use the same approach used in other components.

1. We need to use isLoadingOnyxValue for the loading state from Onyx.

As we do in other components, it's better to use isLoadingOnyxValue to get the loading state from Onyx.

- const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyId}`);
+ const [policyCategories, policyCategoriesResult] =  useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyId}`);
+ const  isLoadingPolicyCategories  =  isLoadingOnyxValue(policyCategoriesResult);

+ const  isLoading  =  !isOffline  &&  isLoadingPolicyCategories;

2. We can also enhance the shouldShowEmptyState by using the same solution the team uses, as shown here: https://github.com/Expensify/App/pull/43921/files using isEmptyObject.

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 259 in 34a8022

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

- const  shouldShowEmptyState  =  !categoryList.some((category) =>  category.pendingAction  !==  CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) &&  !isLoading;
+ const  shouldShowEmptyState  = isEmptyObject(policyCategories) || !categoryList.some((category) =>  category.pendingAction  !==  CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) &&  !isLoading;

What alternative solutions did you explore?

[melvin-bot]

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

[melvin-bot]

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

[VictoriaExpensify]

I was able to recreate this, agree it's not great but it is a pretty low priority.

[ZhenjaHorbach]

@VictoriaExpensify, can I be C+ here since I reported this issue and already have context ?

[melvin-bot]

📣 @rayane-djouah 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @ZhenjaHorbach 🎉 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 📖

[ZhenjaHorbach]

@rayane-djouah
Do you mind if I check the proposals ?

[rayane-djouah]

No problem, please go ahead ☺️

[ZhenjaHorbach]

@dominictb @devguest07
Thank you both for your proposals!

@devguest07
Your proposal makes sense, but the problem is that policyCategoriesResult always returns status: 'loaded'. Therefore, technically, nothing will change.

@dominictb
Your proposal makes more sense. In fact, we have a slightly incorrect condition for displaying the loader:

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Line 257 in 2026f62

const isLoading = !isOffline && policyCategories === null;

However, your proposal is a bit redundant but it's correct. We just need to check if policyCategories is undefined without checking for null, as we do in many other places:

App/src/pages/workspace/tags/WorkspaceTagsPage.tsx

Line 174 in 363ac2d

const isLoading = !isOffline && policyTags === undefined;

App/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

Line 119 in 363ac2d

const isLoading = !isOffline && taxesList === undefined;

App/src/pages/iou/request/step/IOURequestStepCategory.tsx

Line 113 in 363ac2d

const isLoading = !isOffline && policyCategories === undefined;

But anyway
This proposal is enough for me

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @dominictb 🎉 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 📖

[ZhenjaHorbach]

Changes from PR are already in production
7 day holding period for regressions will end on July 22

[ZhenjaHorbach]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ZhenjaHorbach] The PR that introduced the bug has been identified. Link to the PR:

#41344

• [@ZhenjaHorbach] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

#41344 (comment)

• [@ZhenjaHorbach] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

NA

• [@ZhenjaHorbach] Determine if we should create a regression test for this bug.

This is a minor issue
Plus the loader display logic is exactly the same as in other places
So I'm not sure if regression tests are needed for this

• [@ZhenjaHorbach] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

[ZhenjaHorbach]

@VictoriaExpensify
Could you please make a payment for this issue? 😃

[ZhenjaHorbach]

@VictoriaExpensify
Friendly bump !

[VictoriaExpensify]

So sorry for the delay here! Automation didn't work and I hadn't been made the owner, so I missed it. Everything's paid up now:

Payment Summary

• Contributor: @dominictb paid via Upwork
• Contributor+: @ZhenjaHorbach via Upwork
  Upwork job

Thanks for your work, everyone!