[issue] remove the white flash when the app is first launched

[sync-by-unito]

It's from Jesse's suggestion #5.

Reproduce steps:
On any loading for iframe page, it will display the full white page before the loading finished.

User story

As a capture app user, I want the page loading without white flash so that I can feel better UX.

┆Issue is synchronized with this Asana task by Unito
┆Created By: Kenny Hung

[sync-by-unito]

➤ Sam commented:

https://css-tricks.com/prevent-white-flash-iframe/ ( https://css-tricks.com/prevent-white-flash-iframe/ )

[sync-by-unito]

➤ Kenny Hung commented:

Oppo / iOS light mode will happened this issue, is about ionic.

[sync-by-unito]

➤ Sam commented:

Just a dev status update.

This issue is not simple to fix,
I created a minimal reproducible project ( https://github.com/sultanmyrza/ionic-iframe-experiments/tree/feat-iframe-experiment ) and asked ( https://ionic.zendesk.com/hc/en-us/requests/44142?page=1 ) for help from the ionic team and waiting for their answer.

[sync-by-unito]

➤ Sam commented:

Ethan Wu,
Can you please look at this comment ( https://forum.bubble.io/t/pageload-white-flash/112343/12 ) from this thread ( https://forum.bubble.io/t/pageload-white-flash/112343/11 )?

To prevent white flash can we experiment and set global styles in the bubble app to

<style> body { background-color: black; } </style>

But it will work on the paid plan only.

[sync-by-unito]

➤ Ethan Wu commented:

Sam I've added it in. can test with qa-release version of iframe

[sync-by-unito]

➤ Sam commented:

Ethan Wu, just to confirm

should I use https://captureappiframe.numbersprotocol.io/version-v221107-ethan-from-qa/

[sync-by-unito]

➤ Sam commented:

I tried this URL also https://captureappiframe.numbersprotocol.io/version-qa-release/

[sync-by-unito]

➤ Sam commented:

Just dev status update:

Didn't worked will try something else

[sync-by-unito]

➤ Sam commented:

Ethan Wu, do we have paid support from bubble?

If so can we ask the bubble team about the Pageload White Flash ( https://forum.bubble.io/t/pageload-white-flash/112343 ) issue?

If I could ask the bubble team I would ask "How to prevent white flash between page loads" and show them thread ( https://forum.bubble.io/t/pageload-white-flash/112343/11 )?

[sync-by-unito]

➤ Ethan Wu commented:

Sam yes we have a paid account. just send them a support ticket and they will respond. usually one business day

[sync-by-unito]

➤ Sam commented:

Ethan Wu, Which account I can use to submit a ticket?

[sync-by-unito]

➤ Sam commented:

Or I just can send from my personal bubble account?

[sync-by-unito]

➤ Ethan Wu commented:

Sam i think you can send it from your own account. just tell them project name because that is the one that is paid

[sync-by-unito]

➤ Ethan Wu commented:

project name is: capture-app-iframe

[sync-by-unito]

➤ Sam commented:

Dev status:

I reported to the ionic team about the issue.
Created a minimal reproducible project ( https://github.com/sultanmyrza/ionic-iframe-experiments/tree/feat-iframe-experiment ) and asked ( https://ionic.zendesk.com/hc/en-us/requests/44142?page=1 ) for help from the ionic

I reported to the bubble team.
Hello"We develop https://captureappiframe.numbersprotocol.io/ ( https://u29214354.ct.sendgrid.net/ls/click?upn=sl8aXKMxCoA1EnNtAa1YoM0asCjUGG5kTBAWrY2BnH43NV8q5ZH3R0qybv3mkZu3hbQOXHWqY4S6eA4tK54ctg-3D-3D0to2_8vLrht0VxUnpefWHGNJcHJeGYutsN3fk2BYMhboS-2Bp4IZ9Ypx9g-2Fero4mQjWKIEhbZXZ4BUbtWLVnRlAVbl6IcZ2hnqRpNPm1h85y5K0UZVDhz1Er5aEJe3uZsUKlH6V6eG2FvbuddZOxD9tWPc-2BQsMElkTU7G8KherAH-2Bkx0SMKnukMC1WzOVAZMgRtUIZWGFMJpm5r6Xo-2B2pbZ9ASIHQ-3D-3D ) with bubble."Then inside our app, we use iframe which loads https://captureappiframe.numbersprotocol.io ( https://u29214354.ct.sendgrid.net/ls/click?upn=sl8aXKMxCoA1EnNtAa1YoM0asCjUGG5kTBAWrY2BnH43NV8q5ZH3R0qybv3mkZu3HK9RO60A8mSe4Eyhbq5IrA-3D-3DJnNG_8vLrht0VxUnpefWHGNJcHJeGYutsN3fk2BYMhboS-2Bp4IZ9Ypx9g-2Fero4mQjWKIEhZvUVQhy0mNyzx2xDRdETW9gBimzYWUd3q-2Bs27h3Lp3kQSgOasJQrTgM7-2BKtGyX1WdUaPejGKgXWteFQrkzqNhjYETFM7gkmDAt3CxJI08pAqqMb9oSZnqzghcrc8aADjr4J01NBakbnqVfpg76kvwA-3D-3D ).""When it loads the iframe there is a white flash (I attached demo). Because our app is dark mode only that white flash is noticeable UX issue.""Our question is how to prevent white flashes on iframe page load."We also found a relevant thread https://forum.bubble.io/t/pageload-white-flash/112343 ( https://u29214354.ct.sendgrid.net/ls/click?upn=sl8aXKMxCoA1EnNtAa1YoPUPU7NTi5qqgTFaF0wMt8Km6RrPOhwK2Yi661NsSoW4rImtk-2BVNDY-2FpGgRp-2B9OYCw-3D-3D71t0_8vLrht0VxUnpefWHGNJcHJeGYutsN3fk2BYMhboS-2Bp4IZ9Ypx9g-2Fero4mQjWKIEh04WcZp-2FmPhMt-2BnpI2Rx3fuNxRUihrSTvPRypMjLMyyQpkvbCzGOpAkMeS8c8CJqdjuhcdKIShp1nXDl983GLPf2DxG9j9DVia5W7UHIZT8YHoMwzL8gr5mGf5kL2wZYKF5S-2FMLvm-2B4vf6URV9FpTgA-3D-3D )"But setting global body background to black didn't worked in our case.""Our project name is capture-app-iframe.""Thank you for your support."Sam - Developer

Will switch to other tasks until I receive feedback from the ionic or bubble team.

[sync-by-unito]

➤ Sam commented:

The bubble team needs more info [screenshot ( https://i.imgur.com/cRJxpe2.png )]

So I prepared them sample project with shareable demo etc. Waiting for their response.

Text from my last email.
Hello, thank you for your response.

Sample code can be found here https://codesandbox.io/s/elated-cherry-qc7t8q?file=/index.html ( https://codesandbox.io/s/elated-cherry-qc7t8q?file=/index.html )

As you can see in this demo ( https://i.imgur.com/CkMxFtS.mp4 ) video there are some white flashes between page loads and page navigation which happens on iOS devices.

So if you open on an iOS device this page https://qc7t8q.csb.app/ ( https://qc7t8q.csb.app/ ) (HTML page with bubble app inside the iframe) you can see white flashes between page navigation.

We also tried setting the iframe background to black but didn't work. How we can prevent this white flash?

Best regards,
Sam

[sync-by-unito]

➤ Sam commented:

Ethan Wu can we add update global style?

Sam: @Ethan Wu,
Can you please look at this comment from this thread?

To prevent white flash can we experiment and set global styles in the bubble app to

<style> html { background-color: transparent; } body { background-color: transparent; } </style>

But it will work on the paid plan only.

[sync-by-unito]

➤ Ethan Wu commented:

Sam i can try. one sec.

[sync-by-unito]

➤ Ethan Wu commented:

Sam where should i add this? under the script in body section?

[sync-by-unito]

➤ Ethan Wu commented:

i've added it in. see screenshot. v221115 branch

[sync-by-unito]

➤ Sam commented:

Ethan Wu thank you I will try it

[sync-by-unito]

➤ Sam commented:

Kenny Hung, cc Tammy Yang, Bofu Chen

Dev status update: using the background color to transparent didn't work.

White flash happens in 2 cases

1. when the app is first launched (Explore tab)
2. when the user navigates to other captures/profiles in (Explore tab)

But after a few navigations, there are no more white flashes.

So far I was able to fix flash at the app launch (case 1) but the user still gets white flash if he navigates in the explore tab. After 2,3 navigation in explore tab white flash disappeared.

I was able to fix case 1 but the coding part is not elegant so I wouldn't add it to the prod code. [git diff screenshot ( https://i.imgur.com/nlFo1ri.png )].

Seems like a white flash happens at app launch only then after a while white flashes are gone.

Initially, I thought that setting the iframe background color to black would resolve the issue, but it turned out to be more complex.

Now, I'm waiting for the ionic team's response ( https://ionic.zendesk.com/hc/en-us/requests/44142 ).
===== Preview of ionic the team's response (START) =====
Sultanmyrza,

I apologize for the late response. I am still investigating this behavior and do not yet have an update on how to resolve the issue.
You should be able to change the vew view background color to black by adding this to the capacitor.confog.json file:
"backgroundColor":"000000"

I can test this out tomorrow and further investigate the sample repo you have provide to determine if there are any other potential solutions.
I will update the ticket with my progress.
Thank you for using ionic,
Tom Driver - Developer Support Engineer
===== Preview of ionic the team's response (END) =====

Kenny Hung, can we move it to the next sprint?

From now on, I will switch to camera-related issues.

[sync-by-unito]

➤ Tammy Yang commented:

Sam let's focus on fixing situation #1 (which according to you comment, it has been finished)

[sync-by-unito]

➤ Sam commented:

Kenny Hung, (cc: Tammy Yang).
Need to move to the next sprint.

I even dive into @capacitor/ios and find a potential fix ( https://github.com/sultanmyrza/ios-webview-bg-experiment/blob/main/README.md ) for white flash but it will require ionic teams to make changes to their framework.

The full conversation with the ionic team about the white flash issue can be found here ( https://ionic.zendesk.com/hc/en-us/requests/44142?page=1 ).

[sync-by-unito]

➤ Kenny Hung commented:

According to discuss from Comment by @sam on v221129-capture-app-ionic ( https://app.asana.com/0/0/1203376695669270/1203455819272863/f ), this task will be re-arrange.

[sync-by-unito]

➤ Kenny Hung commented:

Sam QA think this part should be also fixed on this sprint with [issue] remove the white flash when the user navigates to other captures/profiles in (Explore tab) ( https://app.asana.com/0/1201016280880500/1203389740732570/f ) and qa had been sent Oppo to you.

[sync-by-unito]

➤ Sam commented:

Kenny Hung iOS version is fixed therefore iOS version can be published but for android to fix I need to try to find a solution and it requires some time

For this sprint I can deliver white flash for iOS and for next sprint fix white flash for android

[sync-by-unito]

➤ Kenny Hung commented:

Sam(cc Tammy Yang) move this task to next sprint.

[sync-by-unito]

➤ Sam commented:

Kenny Hung, I couldn't reproduce the white flash on the Oppo device. I tried to set dark mode to white mode but there was no white flash as you can see in the claap.

https://app.claap.io/numbers-protocol/qa-oppo-can-not-reproduce-iframe-white-flash-dark-light-mode-c-O35CsUM4Uy-wni0D8yzK6NG ( https://app.claap.io/numbers-protocol/qa-oppo-can-not-reproduce-iframe-white-flash-dark-light-mode-c-O35CsUM4Uy-wni0D8yzK6NG )

[sync-by-unito]

➤ Sam commented:

Kenny Hung, I couldn't reproduce the white flash on the Oppo (dark mode, light mode).
https://app.claap.io/numbers-protocol/qa-oppo-can-not-reproduce-iframe-white-flash-dark-light-mode-c-O35CsUM4Uy-ZyJdGbCNdCOX ( https://app.claap.io/numbers-protocol/qa-oppo-can-not-reproduce-iframe-white-flash-dark-light-mode-c-O35CsUM4Uy-ZyJdGbCNdCOX )

[sync-by-unito]

➤ Kenny Hung commented:

Sam Replied on the claap. https://app.claap.io/numbers-protocol/qa-oppo-can-not-reproduce-iframe-white-flash-dark-light-mode-c-O35CsUM4Uy-ZyJdGbCNdCOX#c-KcP4cZEtJP4s19oCENFwV ( https://app.claap.io/numbers-protocol/qa-oppo-can-not-reproduce-iframe-white-flash-dark-light-mode-c-O35CsUM4Uy-ZyJdGbCNdCOX#c-KcP4cZEtJP4s19oCENFwV )

[sync-by-unito]

➤ Sam commented:

Just side note this issue can also be fixed by this PR ( #2423 ).