[P2P Statements] Add Loading Indicator

[nickmurray47]

Details

Add loading indicator while p2p statements page is loading.

Fixed Issues

$ GH_LINK

Tests

1. Follow the testing and setup steps from this PR
2. When you load the statements modal with a lot of transactions, verify a loading indicator is present before the content loads

PR Review Checklist

Contributor (PR Author) Checklist

• I made sure to pull main before submitting my PR for review
• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I clearly indicated the environment tests should be run in (Staging vs Production)
• I wrote testing steps that cover success & fail scenarios (if applicable)
• I ran the tests & they passed on all platforms
• I included screenshots or videos for tests on all platforms (tested every platform except for mWeb)
• I verified there are no console errors related to changes in this PR
• I followed proper code patterns (see Reviewing the code)
  • I added comments when the code was not self explanatory
  • I put all copy / text shown in the product in all src/languages/* files (if applicable)
  • I followed proper naming convention for platform-specific files (if applicable)
  • I followed style guidelines (in Styling.md) for all style edits I made
• I followed the guidelines as stated in the Review Guidelines

PR Reviewer Checklist

• I verified the Author pulled main before submitting the PR
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the testing environment is mentioned in the test steps
• I verified testing steps cover success & fail scenarios (if applicable)
• I verified tests pass on all platforms & I tested again on all platforms
• I checked that screenshots or videos are included for tests on all platforms
• I verified there are no console errors related to changes in this PR
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified comments were added when the code was not self explanatory
  • I verified any copy / text shown in the product was added in all src/languages/* files (if applicable)
  • I verified proper naming convention for platform-specific files was followed (if applicable)
  • I verified style guidelines were followed
• I verified that this PR follows the guidelines as stated in the Review Guidelines

QA Steps

1. [Only on web for right now] On prod with an account with wallet transactions (can use my own account here), go to new.expensify.com/statements/202112 and verify a loading indicator displays before the statements page is loaded.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[nickmurray47]

Ready for review!

[thienlnam]

Looks good but one comment about the loader which can clean up a lot of the code

[nickmurray47]

lol, ready for you again @thienlnam !

[MelvinBot]

Triggered auto assignment to @Gonals (InternalQA), see https://stackoverflow.com/c/expensify/questions/5042 for more details.

[botify]

@nickmurray47 looks like this was merged without passing tests. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by @nickmurray47 in version: 1.1.41-0 🚀

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

[OSBotify]

🚀 Deployed to staging by @nickmurray47 in version: 1.1.41-0 🚀

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

[francoisl]

@nickmurray47 to clarify, can this only be tested on production? I see a loading indicator if I try on staging, but the app reloads over and over.
If it's production QA only, let's check it off of #7954.

[nickmurray47]

Yeah @francoisl I'm doubtful this will work on Staging so we should be good to check it off.

[OSBotify]

🚀 Deployed to production by @francoisl in version: 1.1.41-6 🚀

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