[HOLD for payment 2022-12-22] DEV - Loading indicator is not in center on Add Bank Account

[kavimuru]

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. Login to new
2. go to Settings - payments - Add Payment method - Bank Account
3. observe the loading indicator

Expected Result:

The loading indicator should be in the center.

Actual Result:

The loading indicator isn't in center

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.36-2
Reproducible in staging?: Needs preproduction (Seems happening only in DEV)
Reproducible in production?: Needs reproduction
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Screen.Recording.2022-12-06.at.11.34.54.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @varshamb
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1670352022190369

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[trjExpensify]

I'm unable to reproduce this on v1.2.36-2 web chrome, so I’m going to close this issue in the absence of clearer reproduction steps to reliably reproduce it.

[aldo-expensify]

By the looks of the video provided in the description, I think this may be happening in native. I'll try to reproduce there.

[aldo-expensify]

Reproduced:

Screen.Recording.2022-12-07.at.9.58.31.AM.mov

[trjExpensify]

Can you confirm the platforms impacted and update the OP? :)

I can't reproduce on iOS native, mWeb safari (iOS), Web or Desktop.

[aldo-expensify]

I can reproduce in all of them, but in DEV, not staging.. so I guess that explains why you can't reproduce :P. Looks like a regression that is going to be deployed at some point

[aldo-expensify]

Ahh, yeah, it is in the description Reproducible in staging?: Needs preproduction (Seems happening only in DEV) 🤦

[aldo-expensify]

The regression seems to be coming from this PR: #12954

[tienifr]

Proposal

Problem

PR: #12954 causes this problem.
In https://github.com/tienifr/App/blob/main/src/components/AddPlaidBankAccount.js#L122-L124
we use styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter to make the loading indicator stays at the center

But after this PR, each child is wrapped by a View => That breaks css

Solution

In order to prevent breaking change to other components (since I checked the rest works correctly), we should change in https://github.com/tienifr/App/blob/main/src/pages/ReimbursementAccount/BankAccountPlaidStep.js. we'll calculate the height of loading component.

+    import variables from '../styles/variables';
+    import withWindowDimensions from './withWindowDimensions';

...

               <FullPageOfflineBlockingView>
                    {(!token || this.props.plaidData.isLoading)
                    && (
                        <View style={[
-    styles.flex1, 
+    {
+    height: this.props.windowHeight- variables.contentHeaderHeight
+    }
styles.alignItemsCenter, 
styles.justifyContentCenter]}>
                            <ActivityIndicator color={themeColors.spinner} size="large" />

...

export default compose(
    withLocalize,
+   withWindowDimensions,
...

Screen.Recording.2022-12-08.at.11.49.02.mp4

[trjExpensify]

@aldo-expensify are we making this a deploy blocker then?

[aldo-expensify]

Well, I think it becomes a deploy blocker when it reaches staging. I don't know if we can use the label before that.

[trjExpensify]

Oh sorry, I saw it on the deploy checklist here when I was going through - should have checked in the PR for the state. Cool, makes sense. Want to add the Internal label in the interim though?

[aldo-expensify]

Draft PR up: #13499

[melvin-bot]

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

• Use measureLayout to calculate scrolling #13499

If no regressions arise, payment will be issued on 2022-12-22. 🎊

After the hold period, please check if any of the following need payment for this issue, and if so check them off after paying:

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

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

• [@aldo-expensify] The PR that introduced the bug has been identified. Link to the PR: Scroll to the right spot when clicking "Fix Errors" #12954
• [@aldo-expensify] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Scroll to the right spot when clicking "Fix Errors" #12954 (comment)
• [@aldo-expensify] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@trjExpensify] A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here:

[trjExpensify]

👋 I'm going to be out from tomorrow when this payment is due.

@varshamb I've sent you an offer for $250 for reporting the issue, and @thesahindia $1k for the PR review. Can you please accept the job offers on this. Once you have, do confirm here in the issue. @JmillsExpensify I'm co-assigning you to settle those contracts if you wouldn't mind!

As for the rest of the checklist..

[@aldo-expensify] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

@aldo-expensify what do you think about this one? I think that will inform whether we should add a regression test for this, as it's largely a cosmetic UI placement issue.

[aldo-expensify]

@aldo-expensify what do you think about this one? I think that will inform whether we should add a regression test for this, as it's largely a cosmetic UI placement issue.

@mvtglobally do you know if this is already part of a test? (Verifying that the loading spinner is in the middle of the panel and not at the top)

[trjExpensify]

Settled up with @thesahindia. 👍

[trjExpensify]

@aldo-expensify it would likely be here if so: https://expensify.testrail.io/index.php?/cases/view/1971065&group_by=cases:section_id&group_order=asc&display_deleted_cases=0&group_id=229065

[aldo-expensify]

Thanks @trjExpensify. I modified the step 4. to be

4. Verify the loading spinner appears vertically centred and then the plaid modal is displayed.

Does that sound good?

[JmillsExpensify]

@varshamb I've sent you an offer for $250 for reporting the issue, and @thesahindia $1k for the PR review. Can you please accept the job offers on this. Once you have, do confirm here in the issue. @JmillsExpensify I'm co-assigning you to settle those contracts if you wouldn't mind!

Circling back on this. I'm still waiting for @varshamb to accept the offer before I can finalize the contract and settle up the reporting bonus.

[JmillsExpensify]

@varshamb Quick reminder that you have an offer outstanding in Upwork for this job. Please accept the offer so we can make sure you're paid.

[JmillsExpensify]

@varshamb Reminding you again that you have an outstanding offer you need to accept in Upwork, thanks!

[trjExpensify]

Awesome, thanks for accepting @varshamb. I've settled up!

@aldo-expensify that edit looks good, so closing this out now. Thanks ya'll!