[Due for payment 2025-09-02] [$250] Change Workspaces empty state

[dubielzyk-expensify]

Change the Workspaces empty state to be consistent with that of the others in the app.

Today the empty state looks like this:

We want to tweak it to look like this:

This is similar to the empty states you can find on Workspaces > Categories and Workspaces > Tags.

cc @Expensify/design (and @jamesdeanexpensify in case he wants copy tweaks. Though I did just reduce what was already there)

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021947444352304938777
• Upwork Job ID: 1947444352304938777
• Last Price Increase: 2025-07-21
• Automatic offers:
• daledah | Contributor | 108207378

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[melvin-bot]

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

[melvin-bot]

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

[jamesdeanexpensify]

I'm good with copy!

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2025-07-22 00:10:13 UTC.

Proposal

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

Change Workspaces empty state

What is the root cause of that problem?

• Workspaces page modification

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

We are currently using

App/src/pages/workspace/WorkspacesListPage.tsx

Lines 453 to 467 in 233790a

	menuItems={workspaceFeatures}
	title={translate('workspace.emptyWorkspace.title')}
	subtitle={translate('workspace.emptyWorkspace.subtitle')}
	ctaText={translate('workspace.new.newWorkspace')}
	ctaAccessibilityLabel={translate('workspace.new.newWorkspace')}
	onCtaPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(ROUTES.WORKSPACES_LIST.route)))}
	illustration={LottieAnimations.WorkspacePlanet}
	// We use this style to vertically center the illustration, as the original illustration is not centered
	illustrationStyle={styles.emptyWorkspaceIllustrationStyle}
	titleStyles={styles.textHeadlineH1}
	/>
	</View>
	</ScrollView>
	)}
	{shouldDisplayLHB && <NavigationTabBar selectedTab={NAVIGATION_TABS.WORKSPACES} />}

We should have shouldShowListEmptyContent along with ConfirmModal that we show if there is no workspace available

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[nyomanjyotisa]

🚨 Edited by proposal-police: This proposal was edited at 2025-07-22 00:52:52 UTC.

Proposal

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

Change Workspaces empty state

What is the root cause of that problem?

Changes request

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

First, change the translation to the following

        emptyWorkspace: {
            title: 'You have no workspaces',
            subtitle: 'Track receipts, reimburse expenses, manage travel, send invoices, and more.',

And then replace this with EmptyStateComponent like the following

                   <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}>
                        <EmptyStateComponent
                            SkeletonComponent={TableListItemSkeleton}
                            headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
                            headerMedia={LottieAnimations.WorkspacePlanet}
                            title={translate('workspace.emptyWorkspace.title')}
                            subtitle={translate('workspace.emptyWorkspace.subtitle')}
                            headerStyles={[styles.emptyStateCardIllustrationContainer, StyleUtils.getBackgroundColorStyle(colors.pink800)]}
                            lottieWebViewStyles={styles.emptyWorkspaceIllustrationStyle}
                            headerContentStyles={styles.emptyStateFolderWebStyles}
                            buttons={[{
                                success: true,
                                buttonAction: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(ROUTES.WORKSPACES_LIST.route))),
                                buttonText: translate('workspace.new.newWorkspace'),
                            }]}
                        />
                    </ScrollView>

additionally we can adjust the empty state skeleton to match the design and update the LottieAnimations with a new one

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

None

[daledah]

Proposal

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

Change Workspaces empty state

What is the root cause of that problem?

Improvement

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

To make the empty list item similar to the design, we need to create a new empty state row component, implement like below:

const barHeight = 7;
const longBarWidth = 120;
const shortBarWidth = 60;
const leftPaneWidth = variables.navigationTabBarSize;
const gapWidth = 12;
function WorkspaceRowSkeleton({shouldAnimate = true, fixedNumItems, gradientOpacityEnabled = false}: WorkspaceRowSkeletonProps) {
    const styles = useThemeStyles();
    const {windowWidth} = useWindowDimensions();
    const {shouldUseNarrowLayout} = useResponsiveLayout();
    const partWidth = Math.floor((windowWidth - leftPaneWidth - gapWidth * 2 - 66) / 3);
    return (
        <ItemListSkeletonView
            shouldAnimate={shouldAnimate}
            fixedNumItems={fixedNumItems}
            gradientOpacityEnabled={gradientOpacityEnabled}
            itemViewStyle={[styles.highlightBG, styles.mb2, styles.br3, styles.ml5]}
            renderSkeletonItem={() => (
                <>
                    <Rect
                        x={12}
                        y={12}
                        rx={5}
                        ry={5}
                        width={36}
                        height={40}
                    />
                    <Rect
                        x={66}
                        y={22}
                        width={longBarWidth}
                        height={barHeight}
                    />
                    <Rect
                        x={66}
                        y={36}
                        width={shortBarWidth}
                        height={barHeight}
                    />
                    {!shouldUseNarrowLayout && (
                        <>
                            <Rect
                                x={66 + partWidth}
                                y={22}
                                width={longBarWidth}
                                height={barHeight}
                            />
                            <Rect
                                x={66 + partWidth}
                                y={36}
                                width={shortBarWidth}
                                height={barHeight}
                            />
                            <Rect
                                x={66 + partWidth * 2}
                                y={22}
                                width={longBarWidth}
                                height={barHeight}
                            />
                            <Rect
                                x={66 + partWidth * 2}
                                y={36}
                                width={shortBarWidth}
                                height={barHeight}
                            />
                        </>
                    )}
                </>
            )}
        />
    );
}
WorkspaceRowSkeleton.displayName = 'WorkspaceRowSkeleton';

Then, add new translation texts, replace FeatureList here to EmptyStateComponent and use the created component above:

App/src/pages/workspace/WorkspacesListPage.tsx

Lines 447 to 465 in 233790a

	<ScrollView
	contentContainerStyle={styles.pt2}
	addBottomSafeAreaPadding
	>
	<View style={[styles.flex1, isLessThanMediumScreen ? styles.workspaceSectionMobile : styles.workspaceSection]}>
	<FeatureList
	menuItems={workspaceFeatures}
	title={translate('workspace.emptyWorkspace.title')}
	subtitle={translate('workspace.emptyWorkspace.subtitle')}
	ctaText={translate('workspace.new.newWorkspace')}
	ctaAccessibilityLabel={translate('workspace.new.newWorkspace')}
	onCtaPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(ROUTES.WORKSPACES_LIST.route)))}
	illustration={LottieAnimations.WorkspacePlanet}
	// We use this style to vertically center the illustration, as the original illustration is not centered
	illustrationStyle={styles.emptyWorkspaceIllustrationStyle}
	titleStyles={styles.textHeadlineH1}
	/>
	</View>
	</ScrollView>

                    <ScrollView
                        contentContainerStyle={[styles.pt2, styles.flexGrow1]}
                        addBottomSafeAreaPadding
                    >
                        <EmptyStateComponent
                            SkeletonComponent={WorkspaceRowSkeleton}
                            headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
                            headerMedia={LottieAnimations.GenericEmptyState}
                            title="You have no workspaces"
                            subtitle="Track receipts, reimburse expenses, manage travel, send invoices, and more."
                            titleStyles={styles.pt2}
                            headerStyles={[styles.emptyWorkspaceIllustrationStyle, StyleUtils.getBackgroundColorStyle(colors.pink800)]}
                            lottieWebViewStyles={styles.emptyStateFolderWebStyles}
                            headerContentStyles={styles.emptyStateFolderWebStyles}
                            buttons={[
                                {
                                    success: true,
                                    buttonAction: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(ROUTES.WORKSPACES_LIST.route))),
                                    buttonText: translate('workspace.new.newWorkspace'),
                                },
                            ]}
                        />
                    </ScrollView>

POC

Note that we might need a new Lottie animation for the design.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[PiyushChandra17]

Proposal

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

Change Workspaces empty state

What is the root cause of that problem?

Improvement

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

In WorkspacesListPage, we need to replace <FeatureList /> component with EmptyStateComponent here

App/src/pages/workspace/WorkspacesListPage.tsx

Lines 452 to 463 in 233790a

	<FeatureList
	menuItems={workspaceFeatures}
	title={translate('workspace.emptyWorkspace.title')}
	subtitle={translate('workspace.emptyWorkspace.subtitle')}
	ctaText={translate('workspace.new.newWorkspace')}
	ctaAccessibilityLabel={translate('workspace.new.newWorkspace')}
	onCtaPress={() => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(ROUTES.WORKSPACES_LIST.route)))}
	illustration={LottieAnimations.WorkspacePlanet}
	// We use this style to vertically center the illustration, as the original illustration is not centered
	illustrationStyle={styles.emptyWorkspaceIllustrationStyle}
	titleStyles={styles.textHeadlineH1}
	/>

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

Line 537 in 233790a

<EmptyStateComponent

<EmptyStateComponent
          headerMediaType={CONST.EMPTY_STATE_MEDIA.ANIMATION}
          headerMedia={LottieAnimations.WorkspacePlanet}
          title={translate('workspace.emptyWorkspace.title')}
          subtitle={translate('workspace.emptyWorkspace.subtitle')}
          headerStyles={[styles.emptyWorkspaceIllustrationStyle, styles.emptyFolderBG]}
          buttons={[
              {
                  buttonText: translate('workspace.new.newWorkspace'),
                  buttonAction: () => Navigation.navigate(ROUTES.WORKSPACE_CONFIRMATION.getRoute(ROUTES.WORKSPACES_LIST.route)),
                  success: true,
              },
          ]}
/>

And tweak the styles and translation changes accordingly

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

n/A

What alternative solutions did you explore? (Optional)

n/A

Result

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.