[HOLD for payment 2022-11-24] [$500] Implement a SplashScreen on web

[roryabraham]

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 a new incognito window
2. Open the developer console, network tab
3. Throttle your network connection to Slow 3G
4. Go to NewDot web (production or staging)

Expected Result:

For the ~55 seconds while the app bundle is downloading, you should see a splash screen while the site is loading.

Actual Result:

For the ~55 seconds while the app bundle is downloading, you just see a blank white screen.

Platform:

We already have this on iOS and Android, just needed on:

• Web
• Mobile Web

Issue reported by: @roryabraham
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1666947230935069

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (External)

[melvin-bot]

Current assignee @roryabraham is eligible for the External assigner, not assigning anyone new.

[roryabraham]

On narrow screens (i.e: mWeb) – the splash screen should exactly match the native splash screen on iOS and Android

[vladamx]

Proposal

The idea is to show the splash as soon as possible and then wait for React to mount the root element with content which will replace the splash screen with app content.

In the alternative solution, the idea is similar but we are controlling the display of the splash by making sure React is done mounting and minTime has passed.

Solution 1:

Solution 2:

Controlling the minimum splash time

Additionally, Webpack needs to be configured to serve the logo like so:

If we don't want this feature on desktop we could detect if we are running in Electron by inspecting window instance

[roryabraham]

Awesome, solution 2 looks good to me, though I think if we could use an svg instead of a png that would be ideal 👍🏼

If we don't want this feature on desktop we could detect if we are running in Electron by inspecting window instance

No need, we can have this work the same on web/desktop.

[melvin-bot]

📣 @vladamx You have been assigned to this job by @roryabraham!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[vladamx]

PR 31.10.2022

@roryabraham I think upwork job link is missing here?

[rushatgabhane]

I think upwork job link is missing here

cc @davidcardoza

[davidcardoza]

Sorry I have been out of the office. Job is posted - https://www.upwork.com/jobs/~0190eba7fee32bdedd

[vladamx]

@davidcardoza I think you've mistakenly put 20 000$ instead of 250$ in the job description?

[parasharrajat]

Oh lol, Lucky mistake...

[vladamx]

PR is up

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[aimane-chnaif]

Please make sure that the solution works in release build.
#12334 causes regression - #12760 in release mode.

[roryabraham]

@aimane-chnaif is correct that the solution for this caused a regression in staging.

[rushatgabhane]

Thanks for quickly fixing the regression @vladamx

[melvin-bot]

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

• Add splash screen on web and desktop #12334

If no regressions arise, payment will be issued on 2022-11-24. 🎊

[davidcardoza]

I will begin processing payment on the 24th if no regressions come up.

[melvin-bot]

@davidcardoza, @vladamx, @rushatgabhane, @roryabraham Huh... This is 4 days overdue. Who can take care of this?

[roryabraham]

Bump for payment @davidcardoza

[davidcardoza]

payment to @vladamx is processed.

[rushatgabhane]

@davidcardoza could you please process payment for C+ too

thank you!

[rushatgabhane]

@roryabraham can you please reopen so that it's on @davidcardoza's list

[davidcardoza]

@rushatgabhane an offer was sent to you via upwork.

[davidcardoza]

@rushatgabhane moving forward please add C+ reviewed in issues and PRs for my team to locate the Contributor+ to pay.

[rushatgabhane]

@davidcardoza okayy, accepted

[davidcardoza]

Paid, thanks.