[$250] Update Wallet and Generic Folder empty state to use lottie animations

[shawnborton]

We have some empty states in our product that are currently static, and we want to update them to have looping Lottie animations.

The first place is the Wallet empty state:

And the other place is anywhere we show the folder empty state, like Search or Workspaces > Tags, Workspaces > Report fields, etc:

Here are the lottie files needed:

• Wallet: SettingsWallet-082324-1.json.zip
• Folder: GenericEmptyState-082324-1.json.zip

cc @roryabraham @Expensify/design @luacmartins for visibility

@trjExpensify - I wonder if this is considered #wave-control polish or something?

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0164ffd5b6f9684066
• Upwork Job ID: 1828144309254029734
• Last Price Increase: 2024-08-26
• Automatic offers:
• Krishna2323 | Contributor | 103690909

Issue Owner

Current Issue Owner: @hungvu193

[melvin-bot[bot]]

Triggered auto assignment to @anmurali (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]]

:warning: It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time :warning:

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-08-26 17:21:01 UTC.

Proposal

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

Update Wallet and Generic Folder empty state to use lottie animations

What is the root cause of that problem?

Improvement

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

We need to add the animations in this file and update the props below: https://github.com/Expensify/App/blob/61aa0af765717caf1592493d838b80ed3e1c0e98/src/pages/Search/EmptySearchView.tsx#L41 https://github.com/Expensify/App/blob/61aa0af765717caf1592493d838b80ed3e1c0e98/src/pages/settings/Wallet/WalletPage/WalletPage.tsx#L375

https://github.com/Expensify/App/blob/0fd1de0f279fffba0129484801942c3bddb148da/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx#L349

https://github.com/Expensify/App/blob/0fd1de0f279fffba0129484801942c3bddb148da/src/pages/workspace/tags/WorkspaceTagsPage.tsx#L362

EmptyStateExpenses https://github.com/Expensify/App/blob/0fd1de0f279fffba0129484801942c3bddb148da/src/pages/iou/request/step/IOURequestStepCategory.tsx#L174

https://github.com/Expensify/App/blob/0fd1de0f279fffba0129484801942c3bddb148da/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx#L316

https://github.com/Expensify/App/blob/0fd1de0f279fffba0129484801942c3bddb148da/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx#L292

We might also need to update several other props like headerMediaType https://github.com/Expensify/App/blob/61aa0af765717caf1592493d838b80ed3e1c0e98/src/pages/Search/EmptySearchView.tsx#L55

• In IOURequestStepCategory we can use EmptyStateComponent instead of WorkspaceEmptyStateSection, or we can update WorkspaceEmptyStateSection to use EmptyStateComponent, we also need to update in NetSuiteImportCustomFieldPage. https://github.com/Expensify/App/blob/0fd1de0f279fffba0129484801942c3bddb148da/src/pages/iou/request/step/IOURequestStepCategory.tsx#L172-L178

  What alternative solutions did you explore? (Optional)


Result

https://github.com/user-attachments/assets/8ab9e392-064f-4659-9098-159da215d3c8

[Krishna2323]

Proposal Updated

• Added result video

[roryabraham]

@Krishna2323 I think you missed a few spots where this change is needed, such as here. Please enumerate all the locations in the app where Illustrations.EmptyState is used.

[Krishna2323]

@roryabraham thanks, proposal updated, we also need to update in WorkspaceCategoriesPage & WorkspaceTagsPage.

[shawnborton]

There's also a spot when creating reportFields that we have an empty list view as well.

[Krishna2323]

@shawnborton, you mean this illustration also, right?

[roryabraham]

@shawnborton that illustration ^ is called Illustrations.EmptyStateExpenses. It's very similar to Illustrations.EmptyState - I think the only difference is that the receipts poking out are purple instead of blue. Can you confirm if we also should replace this with the animated alternative?

[shawnborton]

Oh interesting, that particular page should be using the same empty state as Search & Tags, not sure why it doesn't.

The one I was referencing was this:

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[shawnborton]

Can you confirm if we also should replace this with the animated alternative?

Yes, but I think the whole view should be replaced with the new empty state style that we see everywhere else. I think it was missed when we updated the empty state views for Search, Tags, etc.

[Krishna2323]

Proposal Updated

• Added the other places which uses EmptyState & EmptyStateExpenses illustration.

[roryabraham]

Optimized .lottie versions of the new animations (let's use these instead of the .json ones): OptimizedAnimations.zip

[melvin-bot[bot]]

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

[Krishna2323]

Thanks for assigning. I will start working on it within an hour.

[trjExpensify]

@trjExpensify - I wonder if this is considered #wave-control polish or something?

I'll pop it in #wave-collect. 👍