[HOLD for payment 2024-04-15] [$500] HIGH: Add empty state UI for the LHN

[roryabraham]

Slack context: https://expensify.slack.com/archives/C01GTK53T8Q/p1705945570975289

Problem

In #focus mode it's possible to "clear out" your LHN such that there's no chats that appear. Note that this only happens on mobile because on wide screens you always have a chat open. In this case, the app looks semi-broken because it's so empty.

Solution

Create an "empty state" UI that gives the user something fun to look at when they've cleared out the LHN in #focus mode.

Mockup
Figma link

Empty state animation
Fireworks lottie file

Empty state illustration
Fireworks.svg.zip
Note that ideally we will want to use an animation here—I'm just attaching the SVG as a just-in-case.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012902c6ddfd90e221
• Upwork Job ID: 1749533931715035136
• Last Price Increase: 2024-01-22
• Automatic offers:
• DylanDylann | Contributor | 28123180
• tienifr | Contributor | 0

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @michaelhaxhiu (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

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

[roryabraham]

Cheers to @dannymcclain for the mockup. If possible, can you include some Figma screenshots in the issue description to show precise sizes and layout? That would be helpful

[dannymcclain]

@roryabraham haha I was JUST about to post a link to the Figma. Yes, I'll get some stuff together and add it to the description.

[roryabraham]

Cheers!

[abzokhattab]

Proposal

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

show nothing to see here if LHN visible options are zero.

What is the root cause of that problem?

new feature

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

If the length of options inside the LHN is zero,then display the "nothing to show here" page. This is done by adding a condition in the LHN list component below to show the new page when there are no options

if data.length === 0 --> then show the new page.

App/src/components/LHNOptionsList/LHNOptionsList.js

Lines 147 to 159 in 8bad243

	<View style={style || styles.flex1}>
	<FlashList
	indicatorStyle="white"
	keyboardShouldPersistTaps="always"
	contentContainerStyle={contentContainerStyles}
	data={data}
	testID="lhn-options-list"
	keyExtractor={keyExtractor}
	renderItem={renderItem}
	estimatedItemSize={optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight}
	extraData={[currentReportID]}
	showsVerticalScrollIndicator={false}
	/>

[neonbhai]

Proposal

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

Empty state UI for the LHN

What is the root cause of that problem?

New Feature

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

We will show the new view here if data is empty:

App/src/components/LHNOptionsList/LHNOptionsList.js

Lines 146 to 148 in 8bad243

	return (
	<View style={style || styles.flex1}>
	<FlashList

We can use the BlockingView component indicate that the LHN is empty:

const isLHNEmpty = data.length === 0;

...
return ( 
  {isLHNEmpty ? (
      <BlockingView
          icon={Illustrations.EmptyLHN}
          title={translate('common.EmptyLHN')}
          subtitle={translate('common.EmptyLHN')}
      />
  ) : (
  ...

If the illustration finalizes to be Lottie Animation, we can extend BlockingView to take in an optional prop of type DotLottieAnimation here and render if passed:

type BlockingViewProps = {
   
   ...
   
   /**JSON object representing a Lottie animation. Will be shown over the title text*/
   illustration?: DotLottieAnimation;
}
  
  ...
  
  {!_.isNull(illustration) ? (
      <Lottie
          source={illustration}
          style={styles.w100}
          webStyle={styles.w100}
          autoPlay
          loop
      />
   ) : (
   
   ...

Alternatively

We can create a new component with styles similar to BlockingView to show the icon, title and subtitle. This allows greater control if the design changes in the future

[jeremy-croff]

Proposal

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

There's no zero state for the sidebar when there's no option list items

What is the root cause of that problem?

This use cases has not been handled. A new user would always have the concierge chat. It's possible to get into the zero state use case when they get cleared from the focus flow.

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

We should create a new zero state component, with props for the icon, text, and instructions.

We can use this in the component where we can render a zero state if the data is empty. And can reuse this component for future use cases.

What alternative solutions did you explore? (Optional)

• Don't allow last item to be hidden ( limits user experience )
• Don't allow concierge to be hidden in focus

[tienifr]

Proposal

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

We want to create an "empty state" UI that gives the user something fun to look at when they've cleared out the LHN in #focus mode

What is the root cause of that problem?

This is a new feature.

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

This issue looks straight forward at a glance, but the complicated thing here is that in the subtitle text we're rendering the icons inside the text itself, and the BlockingView component that we typically use for this use case does not support such inline icons yet. The existing subtitle of BlockingView as suggested above won't be able to support that use case.

1. We need to add support for custom subtitle renderer in BlockingView. We need to update this to

{renderSubtitle ? renderSubtitle() : (
    shouldEmbedLinkWithSubtitle ? (
        <Text style={[styles.textAlignCenter]}>{renderContent()}</Text>
    ) : (
        <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>{renderContent()}</View>
    )
)}

so that we support custom subtitle renderer renderSubtitle as a prop.

2. In LHNOptionsList, define a renderEmptyStateSubtitle with the logic to embed the icons into the text

const renderEmptyStateSubtitle = useCallback(() =>
        <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
            <Text color={theme.placeholderText} style={styles.textAlignCenter}>
                {translate('common.findAChatUsingThe')}
                <Icon
                    src={Expensicons.MagnifyingGlass}
                    width={variables.iconSizeSmall}
                    height={variables.iconSizeSmall}
                    small
                    inline
                    fill={theme.icon}
                />
                {translate('common.buttonAboveOrCreateSomethingUsingThe')}
                <Icon
                    src={Expensicons.Plus}
                    width={variables.iconSizeSmall}
                    height={variables.iconSizeSmall}
                    small
                    inline
                    fill={theme.icon}
                />
                {translate('common.buttonBelow')}
            </Text>
        </View>, 
    [theme, styles.alignItemsCenter, styles.justifyContentCenter, styles.textAlignCenter, translate]);

In here I use the regular text space to render the space between the icon and surround text, but if we want it to be exact pixels, we can do that by passing custom styles to the Icon (and also a bit of style handling inside Icon itself for the icon container, current component as is doesn't seem to be able to support such exact pixels).

We also need to embed the icons inside wrapper Text component, make sure the icons are inline and style it properly for it to work as per design.

3. And then if the LHN is empty (by checking the data passed into the FlashList), render the BlockingView instead of the FlashList

<BlockingView
    icon={Illustrations.TeleScope}
    iconWidth={variables.emptyWorkspaceIconWidth}
    iconHeight={variables.emptyWorkspaceIconHeight}
    title={translate('common.nothingToSeeHere')}
    shouldShowLink={false}
    renderSubtitle={renderEmptyStateSubtitle}
/>

Or we can make use of the ListEmptyComponent prop of the FlashList to do this.

4. Some translations used above needs to be added here

nothingToSeeHere: 'Nothing to see here',
findAChatUsingThe: 'Find a chat using the ',
buttonAboveOrCreateSomethingUsingThe: " button above, or create something using the ",
buttonBelow: ' button below.',

5. In case we want to go with a Lottie animation, we can passed in a animation prop into BlockingView and use it with <Lottie /> instead of icon if it's defined. According to the confirmation here, we should use the LottieAnimations.Fireworks for this, we already use that animation elsewhere like in here so can just do the same for the BlockingView with the same approach.

We can also isolate the changes in 2 and 3 (by condition) to only smallScreenWidth screens, since this not found page only applies to small screen as per the OP.

What alternative solutions did you explore? (Optional)

There might be further minor style changes needed (color, spacing, ...) that can be addressed in the PR phase.

If we're worried about the text being broken down into chunks for translations (I saw we're doing it in many other places in the app so I think we're fine with it), we can improve the translation variables engine so that it can put Icons as variables.

Regarding the inline app icons in the text, one alternative is we can use equivalent chat emojis, but that won't look like the app's design (and the buttons we're telling the users about) and it will look inconsistent.

Result (before Lottie animation was confirmed, with Lottie it will be look a bit different)

[roryabraham]

Thanks for the proposals everyone, just want to clarify that the designs are finalized. Going to hold off on accepting a proposal until I get the final 👍🏼 from @dannymcclain https://expensify.slack.com/archives/C01GTK53T8Q/p1706085371949699?thread_ts=1705945570.975289&cid=C01GTK53T8Q

[dannymcclain]

Thanks @roryabraham! I think we may want to consider an alternate illustration and some updated copy. Structurally, I think the layout is pretty well determined, but I'd like to get the final details worked out with the team.

[roryabraham]

kk, going to slap the Planning label on this and temporarily remove Help Wanted. My apologies to those that left proposals already – @dubielzyk-expensify joined the convo a bit after I created this issue and came in swinging with some awesome ideas we don't want to ignore.

[laurenreidexpensify]

Waiting for KI retest on #37296

[DylanDylann]

@laurenreidexpensify no longer hold, please remove hold label

[laurenreidexpensify]

PR deployed to staging 🚀

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.60-13 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Feature: Empty state UI for LHN #37361

If no regressions arise, payment will be issued on 2024-04-15. 🎊

For reference, here are some details about the assignees on this issue:

• @tienifr requires payment automatic offer (Contributor)
• @DylanDylann requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@DylanDylann] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@laurenreidexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[trjExpensify]

Heads up, @tienifr & @DylanDylann: #39932 (comment)

[tienifr]

#39932 is not a regression from this one as per #39932 (comment).

[laurenreidexpensify]

@trjExpensify can you confirm ^^

[roryabraham]

according to the investigation of a few people on #39932, it was not caused by #37361. So we don't think this caused a regression

[trjExpensify]

Correct yeah, seems like it's onboarding related. :)

[laurenreidexpensify]

Payment Summary:

• c+ $500 @DylanDylann offer sent in upwork
• contributor $500 @tienifr offer sent in upwork

[laurenreidexpensify]

Payment Summary:

• c+ $500 @DylanDylann paid via upwork
• contributor $500 @tienifr paid via upwork

[laurenreidexpensify]

@DylanDylann @tienifr please confirm checklist / regression testing

[DylanDylann]

Regression Test Proposal

Small screen devices only

1. Switch to #focus mode
2. Mark all reports as read or unpin them so that LHN is cleared out
3. Verify the empty state UI shows as expected
4. Verify it in different themes, languages and devices

Do we agree 👍 or 👎