[HOLD for payment 2024-08-14] [HOLD for payment 2024-07-24] [$250] Create empty state component for list view pages

[shawnborton]

Right now, our empty states for certain list views look pretty underwhelming:

We want to make these empty states feel nicer by using a subtle hint that the page will eventually contain data by using a faded row pattern, while also creating space for the middle of the page to show an informative or educational modal. The component we want to build is something like this:

Here is a video of the component in action, and you can find it in our brand guidelines as well:

https://github.com/Expensify/App/assets/2319350/a355dafe-d97e-414d-bf37-cc57ac5caed7

The idea is this:

• the empty state can have a variety of different row styles in the background
  • table rows to match Search on desktop
  • compact rows to match Search on mobile
  • other generic row styles that our app supports elsewhere
• we should be able to decide if we want to show a static illustrated header, or if we want to pass in a video or looping GIF
• we should optionally be able to choose if we want to include a button in the empty state card or not
• we should make sure we have a good minimum and maximum height for the empty state rows so we don't get any wild, unexpected results on extreme viewport cases

Once this component is in a robust state, we'll plan to implement it on the Search page as well as some other upcoming projects like Workspace feeds.

cc @mountiny @filip-solecki @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01809e49334f961ddd
• Upwork Job ID: 1801589500078964548
• Last Price Increase: 2024-06-21

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot[bot]]

Current assignee @shawnborton is eligible for the Design assigner, not assigning anyone new.

[filip-solecki]

Hi! I am Filip from SWM an expert agency and I'd like to work on this issue!

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to @JmillsExpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot[bot]]

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

[shawnborton]

@filip-solecki these are the possible skeletons that might be included in the empty state component:

The Search Desktop skeleton row already exists, though I am proposing that we slightly update it to have a background color as part of this PR. In that same PR, we are making the Search Mobile skeleton rows which don't exist yet. Chat rows already exist. But generic table rows do not exist to my knowledge, so we'll need to make those skeletons as part of this.

[melvin-bot[bot]]

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

[filip-solecki]

Is there a confirmed design for any page where we can implement the new empty state component? I almost completed my work, but currently, there's no place to implement it for testing.

[filip-solecki]

cc @shawnborton @mountiny

[mountiny]

I believe we can add this to the Search page, right? @shawnborton

[filip-solecki]

So I just need confirmed design with illustration/animation/video whatever will be used there

[shawnborton]

Yup, search page will be a great place to test it out. You can start implementing it with a generic illustration (pick any existing one) and I'll follow up soon with a good one to use.

[shawnborton]

In the workspace editor, when you enable Tags or Taxes, we can use this component here too:

[filip-solecki]

Taxes cannot be empty, while enabling we are creating two default tax rates and one has to always be set as default and cannot be deleted, but Categories may be empty so I'll add it also on Tags and Categories. Just send me all illustrations or whatever has to be in header there.

[shawnborton]

@Expensify/design thoughts on doing something generic for these pages, like the folder illustration we currently use there?

[shawnborton]

If that works, the illustration is here: empty-state__folder_ice.svg.zip

It should be shown at 184x112, and the background should use our yellow600 color (#D18000)

[filip-solecki]

PR is ready for review!

[dannymcclain]

@Expensify/design thoughts on doing something generic for these pages, like the folder illustration we currently use there?

Yup I like that. I think that folder illustration works well as a generic empty state image for these table views.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

• https://github.com/Expensify/App/pull/44137

If no regressions arise, payment will be issued on 2024-07-24. :confetti_ball:

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

• @eVoloshchak requires payment through NewDot Manual Requests
• @filip-solecki does not require payment (Contractor)

[melvin-bot[bot]]

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

• [ ] [@eVoloshchak] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [ ] [@JmillsExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[dubielzyk-expensify]

Dig it!

[melvin-bot[bot]]

Payment Summary

Upwork Job

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

BugZero Checklist (@JmillsExpensify)

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

[JmillsExpensify]

Payment summary above is filled out and correct. @eVoloshchak please propose a regression test and we can get your payment approved once I receive it in NewDot. Thanks!

[eVoloshchak]

Regression Test Proposal

1. Log in to the app
2. Go to Account Settings -> Workspaces
3. Select any workspace
4. Go to More Features
5. Enable Tags and Categories
6. Open Categories page and remove all categories
7. Verify there is an empty page placeholder with the following text "You haven't created any categories"
8. Go to tags, remove all tags if there are any
9. Verify there is an empty page placeholder with the following text "You haven't created any tags"

Do we agree 👍 or 👎

[JmillsExpensify]

Reopening for regression test and payment summary from someone else.

[mallenexpensify]

Contributor+: @eVoloshchak owed $250 via NewDot

Test Case GH

• https://github.com/Expensify/Expensify/issues/418337

[JmillsExpensify]

$250 approved for @eVoloshchak

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

• https://github.com/Expensify/App/pull/46476

If no regressions arise, payment will be issued on 2024-08-14. :confetti_ball:

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

• @eVoloshchak requires payment through NewDot Manual Requests
• @filip-solecki does not require payment (Contractor)

[melvin-bot[bot]]

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

• [ ] [@eVoloshchak] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [ ] [@JmillsExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.