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

@roryabraham

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

@anmurali

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.

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

@shawnborton

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

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

Proposal Updated

Added result video

@Krishna2323

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

@roryabraham

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

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

@shawnborton

@shawnborton, @anmurali, @hungvu193, @roryabraham, @Krishna2323 Whoops! This issue is 2 days overdue. Let's get this updated quick!

@Krishna2323

paid @Krishna2323
@hungvu193 sent you an offer

Thanks. I've just accepted!

@shawnborton

@shawnborton, @anmurali, @hungvu193, @roryabraham, @Krishna2323 Whoops! This issue is 2 days overdue. Let's get this updated quick!

Paid.

Navigation Menu

Repository navigation

[Awaiting Payment] [$250] Update Wallet and Generic Folder empty state to use lottie animations #48013

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

Proposal Updated

32 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

[Awaiting Payment] [$250] Update Wallet and Generic Folder empty state to use lottie animations #48013

Description

Activity

melvin-bot commented on Aug 26, 2024

melvin-bot commented on Aug 26, 2024

melvin-bot commented on Aug 26, 2024

melvin-bot commented on Aug 26, 2024

Krishna2323 commented on Aug 26, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

Krishna2323 commented on Aug 26, 2024

Proposal Updated

roryabraham commented on Aug 26, 2024

Krishna2323 commented on Aug 26, 2024

shawnborton commented on Aug 26, 2024

32 remaining items

melvin-bot commented on Oct 8, 2024

anmurali commented on Oct 9, 2024

hungvu193 commented on Oct 9, 2024

melvin-bot commented on Oct 14, 2024

anmurali commented on Oct 16, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

What alternative solutions did you explore? (Optional) 