[Awaiting Payment] [$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: @anmurali

[melvin-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]

⚠️ 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 ⚠️

[melvin-bot]

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

[melvin-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:

App/src/pages/Search/EmptySearchView.tsx

Line 41 in 61aa0af

headerMedia: Illustrations.EmptyState,

App/src/pages/settings/Wallet/WalletPage/WalletPage.tsx

Line 375 in 61aa0af

illustration={Illustrations.BigVault}

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

Line 349 in 0fd1de0

headerMedia={Illustrations.EmptyState}

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

Line 362 in 0fd1de0

headerMedia={Illustrations.EmptyState}

EmptyStateExpenses

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

Line 174 in 0fd1de0

icon={Illustrations.EmptyStateExpenses}

App/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx

Line 316 in 0fd1de0

headerMedia={Illustrations.EmptyStateExpenses}

App/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

Line 292 in 0fd1de0

headerMedia={Illustrations.EmptyStateExpenses}

We might also need to update several other props like headerMediaType

App/src/pages/Search/EmptySearchView.tsx

Line 55 in 61aa0af

headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}

• In IOURequestStepCategory we can use EmptyStateComponent instead of WorkspaceEmptyStateSection, or we can update WorkspaceEmptyStateSection to use EmptyStateComponent, we also need to update in NetSuiteImportCustomFieldPage.
  

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

  Lines 172 to 178 in 0fd1de0

  	<WorkspaceEmptyStateSection
  	shouldStyleAsCard={false}
  	icon={Illustrations.EmptyStateExpenses}
  	title={translate('workspace.categories.emptyCategories.title')}
  	subtitle={translate('workspace.categories.emptyCategories.subtitle')}
  	containerStyle={[styles.flex1, styles.justifyContentCenter]}
  	/>

What alternative solutions did you explore? (Optional)


Result

Monosnap.screencast.2024-08-26.23-35-46.mp4

[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.