Add VBA loading animation

[mountiny]

cc @MitchExpensify

Details

Adds an animation in between VBA steps to make the UI more intuitive.

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/172797

Tests

1. Create a new workspace.
2. Navigate to it and click Get Started
3. Choose Connect Manually
4. Fill in the Routing number and Account number and click Save & Continue
5. Fill in all the company information and click Save & Continue
6. Make sure the loading page/animation looks like on the videos

Additionally, can you please test on physical Android device, if the gif animation really works between the steps of VBA flow? In emulator, it has been static image, but the entire app is very slow in my emulator so not sure what has caused it.

QA Steps

Same as tests.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android - only emulator

Screenshots

Web

web.mov

Mobile Web

mobile_web.mov

Desktop

desktop.mov

iOS

iphone.mov

Android

android.mov

[mountiny]

I will need to follow these steps to make sure the gif works well on Android too.

i will try to update this over weekend. I will be ooo next Monday.

[mountiny]

@TomatoToaster This should be ready for review!

[mountiny]

I have not been able to test it on Android, my setup has gone wild and can't run it, but that is not related to the changes here.

[mountiny]

@TomatoToaster Alright, I have managed to make my android emulator run it by uninstalling the app from the emulator and then running it again.

It is extremely sluggish which is as always I guess but then the gif of the animation does not move at all. So I do not know if that is just caused by the sluggishness of the system or the gif cant be animated on Android. Are you able to test it on physical device? I do not have any :/

Thank you for the review!

[TomatoToaster]

Left some comments but they seem NAB. Except the generated file one asked about it in slack.

[TomatoToaster]

It is extremely sluggish which is as always I guess but then the gif of the animation does not move at all. So I do not know if that is just caused by the sluggishness of the system or the gif cant be animated on Android. Are you able to test it on physical device? I do not have any :/

I don't have a physical device to test on. Hmm instead of blocking on that though, can you add in the Tests/QA section to explicitly test this on and android device and to make note if it's frozen. Even if the gif freezes up just for android, I don't think it should block this from being merged. We can explore in a follow-up/regression how to fix that particular issue. Hopefully, it's just a quirk of the emulator.

Do you think that makes sense @mountiny, or do you have an idea what might be causing the frozen animation?

[mountiny]

@TomatoToaster That makes a lot of sense, I would not block it on this issue for sure. I will address the NAB comments and ask for final review.

I do not have a clue if this is just caused by the emulator or it really is like that on physical Android device (I hope the app is not so slow on physical android device as it is in the emulator 😅)

[mountiny]

@TomatoToaster I have updated the small changes, so asking for a final review. Thank you very much 🙌

[TomatoToaster]

LGTM, feel free to merge if you catch it passing the tests before I do.

[isagoico]

@vitHoracek Hello! We currently don't have a test domain to QA this since all our test domains already have the expensify card and the "Get started" won't show for us. Can this be tested internally?

[mountiny]

@isagoico Of course, sorry I have not added the label from the start! I will take care of it.

[MitchExpensify]

Tested - Looks great! Good to check off the list @isagoico

[OSBotify]

🚀 Deployed to staging by @mountiny in version: 1.0.83-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	failure ❌
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @isagoico in version: 1.0.85-9 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅