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

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.

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

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

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

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

📣 @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. 👍