Repository navigation
[HOLD for payment 2024-04-15] [$500] HIGH: Add empty state UI for the LHN #34926
Description
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
Activity
melvin-bot commentedon Jan 22, 2024
Job added to Upwork: https://www.upwork.com/jobs/~012902c6ddfd90e221
[-][LOW] Empty state UI for the LHN[/-][+][$500] [LOW] Empty state UI for the LHN[/+]melvin-bot commentedon Jan 22, 2024
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 commentedon Jan 22, 2024
Triggered auto assignment to Contributor-plus team member for initial proposal review - @ntdiary (
External)103 remaining items
trjExpensify commentedon Apr 9, 2024
Heads up, @tienifr & @DylanDylann: #39932 (comment)
tienifr commentedon Apr 10, 2024
#39932 is not a regression from this one as per #39932 (comment).
laurenreidexpensify commentedon Apr 15, 2024
@trjExpensify can you confirm ^^
roryabraham commentedon Apr 15, 2024
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 commentedon Apr 15, 2024
Correct yeah, seems like it's onboarding related. :)
laurenreidexpensify commentedon Apr 16, 2024
Payment Summary:
laurenreidexpensify commentedon Apr 17, 2024
Payment Summary:
laurenreidexpensify commentedon Apr 17, 2024
@DylanDylann @tienifr please confirm checklist / regression testing
DylanDylann commentedon Apr 17, 2024
Regression Test Proposal
Small screen devices only
Do we agree 👍 or 👎
truph01 commentedon Dec 31, 2024
@roryabraham On wide screens, there's a scenario where the LHN appears empty. Should we consider handling this case for wide screens?
shawnborton commentedon Jan 2, 2025
I think it's probably worth adding, yeah. Can you leave that comment on the new issue?