Animate the Empty State

[grgia]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

We have some lottie animations, let's use them + add a gradient and animate the empty state.

The background animation will need to work for both themes.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0125742c76895ef142
• Upwork Job ID: 1664270385032765440
• Last Price Increase: 2023-06-01

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @eVoloshchak (Internal)

[shawnborton]

Will share a Lottie file as soon as I have it!

[grgia]

Link to Lottie files: https://expensify.slack.com/archives/C03KN50J0PM/p1685655362569899?thread_ts=1685627642.791289&cid=C03KN50J0PM

[grgia]

@shawnborton I'm wondering if we should just add the gradient to the images themselves rather than masking with a gradient- is there a reason to use a flat color here?

[grgia]

Here's an example with a gradient mask on the left side, so it's definitely an option but I might need some specifics for the mask if we choose this route:

[shawnborton]

We can do whatever you think is easiest - but looks like the mask might work well for us? My thinking for the mask is that it would be gradient that looks something like this:

background: linear-gradient(0deg, #061B09 0%, rgba(6, 27, 9, 0) 100%);

[grgia]

@shawnborton for that mask example, what is the height of the mask over the image? Is it 100% height and width?

[shawnborton]

Yup exactly!

[grgia]

planning on working on this again once I wrap up the docs I'm updating

[grgia]

still working on this

[thienlnam]

We already have an issue to animate the empty state FYI - linking here so we don't do duplicate work #16366

[grgia]

@thienlnam this is just adding the lottie animations- the linked issue is for tilt screen animations- I don't think it's dupe

[roryabraham]

@grgia agree this is not a dupe, but maybe we should clarify this issue title like "Add empty state illustrations to thread reports".

[grgia]

@roryabraham I can separate the issues as well

[grgia]

Delay on this - making Lottie resize and repeat like an image has been a little bit more complicated, still working on getting it to look good on all screen sizes

[shawnborton]

Not overdue, but not a priority.

[grgia]

Checking see if anyone from callstack wants to take this https://expensify.slack.com/archives/C03UK30EA1Z/p1711454705303899

[melvin-bot]

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

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

[grgia]

Posted in SWM https://expensify.slack.com/archives/C04878MDF34/p1711560191194859

Otherwise, going to make this external from this point

[blazejkustra]

Hey! @SzymczakJ is interested, he'll post a comment today morning 😄

[SzymczakJ]

Hey! I’m Jakub Szymczak from Software Mansion, an expert agency, and I’d like to work on this issue!

[grgia]

Try these!
ExpensifyLottieFiles_060123_2 (1).zip

[grgia]

https://expensify.slack.com/archives/C03KN50J0PM/p1685627642791289

ExpensifyLottieFiles_060123 (1).zip

dark mode assets / original slack thread for future ref!

[SzymczakJ]

I have a design question:
Right now we have an image in empty state background and this image is repeated when image width is smaller than window width which results in this:

Such 'repeat' feature won't be done easily since Lottie doesn't support this. Can we stick to the single animation in the center? It will simplify the code by a lot and personally I think it looks better:

@shawnborton

[shawnborton]

Can we stick to the single animation in the center? It will simplify the code by a lot and personally I think it looks better:

I think we could, but perhaps we should make the image way bigger. Ideally we want this to feel as similar to the existing empty state as possible.

[SzymczakJ]

Making image bigger when display width is bigger than image is definitely a good idea! How much bigger should the image be? Right now image height for a big screen is 450px. My proposition is: when the image width becomes smaller than display width, then we could enlarge it so the height is for example 800px(width will be scaled accordingly). This is how this looks like when display width is almost 3000px

What do you think @shawnborton @grgia?

[SzymczakJ]

One more thing that would make animation look better and make it more similar to the existing background:
Animation has a lot of free space at the top, compared to the existing background.
Existing background:

New animation:

As we can see there is a lot of unused empty space. Can we tweak this lottie animation so the empty space is minimalized, as it is in the current background?

[shawnborton]

Hmm yeah, good shout there. I bet we can update the animation to better match the existing dimensions of the empty state. Can you let me know what the existing empty state dimensions are? Perhaps even attach the svg here too if you can - thanks!

[SzymczakJ]

Current state(original image dimensions are 3896 × 1048):
images.zip

New animations(original image dimensions are 3750 × 1120):
animations.zip

[mallenexpensify]

Are we close to wrapping this up? Asking because we're adding all bugs and new feature issues to VIP and Wave GH projects that are aligned with our roadmap and releases and this doesn't really fit into any. Trying to figure out how best to manage or, if we want to close.

[shawnborton]

Hmm those are valid points. This is really just design polish at this point and the current empty state seems to be working just fine. I would be fine closing this one out so we can focus on higher priorities.

[shawnborton]

Going to close this then - sorry for the false alarm @SzymczakJ

[grgia]

@shawnborton do we just need to change the asset sizes? I think @SzymczakJ was nearly done with the implementation otherwise. Totally fine if we don't have the design capacity to QA this right now, but it maybe it's still worth it to push this one through while the works been done and we already have this rad animation?

[shawnborton]

Yeah, I think there are a couple of things that we need to consider here:

1. We are changing the way the empty state works, in that we are going to make it take up less scrolling space and feel more like a background element. It doesn't change much, but I think we should wait until that is finished before doing anything else.
2. We'd definitely need to have this animation recreated in the new dimensions/size, and I'm not sure if it's worth the effort/cost
3. Have we investigated how this might impact performance? This would put a lottie animation on virtually every single chat view in the app. So I think I am a little cautious to move forward after thinking more on that. Thoughts?

[SzymczakJ]

3. Have we investigated how this might impact performance? This would put a lottie animation on virtually every single chat view in the app. So I think I am a little cautious to move forward after thinking more on that.
   I probably should have started with checking the performance. I've been developing this on web and it worked smoothly, but now I've checked it on a real iOS device and that's how it looks like:

lowperf.mov

There is a visible drop of frames when scrolling through chat with having an animation in the background. This animation consists of many elements, so the drop of frames is normal. After talking to some animation experts in SWM and trying Lottie optimisation tools I don't think we can speed up this animation in any way apart from making the animation simpler.
TL;DR performance on real devices is bad, I think we have to make this animation simpler(not having so many animated elements, not being so complex etc.)

[grgia]

Hmm, given the performance impact/needing to update assets, maybe @shawnborton's right that it's best to table this issue for now. Do you agree?

[shawnborton]

Yeah, I'm thinking we just table this.