[HOLD for payment + bonus] Make bank account loading animations consistently top docked in the right hand pane

[MitchExpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Open New Expensify
2. Click "+"
3. Click "Create Workspace"
4. Click "Get Started"

Expected Result:

We expect all loading animations in the bank account connection flow to be positioned at the top of right hand pane here:

Actual Result:

Some loading animations are positioned in the center here (Validate step):

And here (clicking Get Started)

Loading.nimation.copy.a.bit.off.when.hitting.Get.Started.mov

Workaround:

Simply ignore, this is a design change.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: v1.0.85-9
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @arielgreen (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MitchExpensify]

Thinking this is a good external candidate issue

[Santhosh-Sellavel]

Proposal

We do pass the below styles to that component for the loading animation view

App/src/styles/styles.js

Lines 1789 to 1796 in 6b3a938

	fullScreenLoading: {
	backgroundColor: themeColors.componentBG,
	opacity: 0.8,
	justifyContent: 'center',
	alignItems: 'center',
	zIndex: 10,
	},

We could remove the justifyContent: 'center' that solves the issue.

We could modify and create a new style for this Component alone.

I'll update more after further investigation thanks!

[Santhosh-Sellavel]

Updated Proposal

After investigation, I conclude that we should create a new style. Because it was used by common FullScreenLoadingIndicator also!

So, we could create a new style as below in styles.js

And use it in the below line,

App/src/components/VBALoadingIndicator.js

Line 13 in d386f42

<View style={[StyleSheet.absoluteFillObject, styles.fullScreenLoading]}>

Like this

Demo Video

Fix.Demo.mov

[Santhosh-Sellavel]

Also, I noticed in the expected Image there is a nav header with a close option it's not available currently will add that post discussion!

Also, a different message is shown, will update that too based on the input. Thanks!

[MelvinBot]

Triggered auto assignment to @TomatoToaster (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @kadiealexander (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[TomatoToaster]

Applying the label so a posting can be made. Agreed this can be external (and there's a proposal a few comments up)

[kadiealexander]

Upwork post: https://www.upwork.com/jobs/~0176449bcbd8e3cd2c

[MelvinBot]

Triggered auto assignment to @Jag96 (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[kadiealexander]

Still waiting on proposals, double-checked that the links were still in the job post (they're still good).

[kadiealexander]

@Jag96 when you get a moment could you please take a look at @Santhosh-Sellavel's proposal above?

[Jag96]

@Santhosh-Sellavel your updated proposal looks good on web, one thing I noticed on mobile is that the indicator is pretty close to the top, maybe we can add update the style to ensure it has some more space on mobile as well? Tagging @Expensify/design to confirm we'd want to add more space:

Also, I noticed in the expected Image there is a nav header with a close option it's not available currently will add that post discussion!

@MitchExpensify is this something we want to add to the steps in the beginning? I thought we only had these for certain steps in the flow, but not sure. If we end up wanting to update every step to show the title while the loading screen is active I think we should create a new issue, since that increases the scope of work here.

@Santhosh-Sellavel also could you apply to the Upwork job so once design clarifies we can accept your proposal and get an offer sent over?

[Santhosh-Sellavel]

Also, I noticed in the expected Image there is a nav header with a close option it's not available currently will add that post discussion!

Also, a different message is shown, will update that too based on the input. Thanks!

@Jag96 Any thoughts on this? Can we skip it now?

[Santhosh-Sellavel]

Need title copy and new message copy @Jag96 with translations
cc: @MitchExpensify

[MitchExpensify]

Title: "One Moment"

Message: "We are taking a look at your information. You will be able to continue with next steps shortly."

[Jag96]

@MitchExpensify so currently we are showing that on the VBA loading screen, I think we need the content for what the header should be, similar to the Validate header:

Validate Header	Need Header value

Should the header value be whatever step the user just filled out? So after they hit Submit on the Add Bank Account screen, should the value on the loading screen be Add Bank Account? Or do we want to just have it be a static header title like One Moment?

[MitchExpensify]

I think a static "One Moment" header is fine personally

[Santhosh-Sellavel]

@MitchExpensify @Jag96 like this?

[MitchExpensify]

That works for me @Santhosh-Sellavel

I notice the Validate message is left aligned and the One Moment message is center aligned. Which should we commit to @shawnborton ?

[shawnborton]

Hmm maybe centered looks nicer under the graphic?

…

On Tue, Aug 24, 2021 at 6:23 PM MitchExpensify ***@***.***> wrote: That works for me @Santhosh-Sellavel <https://github.com/Santhosh-Sellavel> I notice the Validate message is left aligned and the One Moment message is center aligned. Which should we commit to @shawnborton <https://github.com/shawnborton> ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4696 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARWH5VL2AR44J4TWYBBO53T6PBQXANCNFSM5CKHZLHQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[Santhosh-Sellavel]

Are we all good with this @shawnborton @Jag96 @MitchExpensify
#4696 (comment)

[Jag96]

Looks good to me!

[Santhosh-Sellavel]

These are existing translations:

oneMoment: 'Un momento...',
oneMoment: 'One moment...',

Can update I like this,

oneMoment: 'One Moment', // en
oneMoment: 'Un Momento', // es

Are the above translations okay?
Let confirm this alone One Moment or One moment?

@Jag96 @MitchExpensify

[Jag96]

If those are no longer used then I think you're good to update them. I'd go with One Moment since we follow that capitalization in a few places (ex - Change Password)

[Santhosh-Sellavel]

@Jag96 VBA Animation is broken in android
Can I post a separate issue for this?

VBA.Android.Broken.mov

or handle it here?

[Santhosh-Sellavel]

@Jag96 need to update the fresco version here to 2.5.0

App/android/app/build.gradle

Lines 241 to 242 in 396e320

	implementation 'com.facebook.fresco:fresco:2.3.0'
	implementation 'com.facebook.fresco:animated-gif:2.3.0'

[Jag96]

@Santhosh-Sellavel good catch, can you update the fresco version as part of #4805?

[Santhosh-Sellavel]

Sure @Jag96!

[Santhosh-Sellavel]

@Jag96 Will get a bonus for this issue 😂 ✌️?

[Jag96]

@Santhosh-Sellavel yes we can add a bonus for the extra work you did on this one 👍

[shawnborton]

Looks good to me 👍

[kadiealexander]

Paid with bonus today (7 days after deployment to production).