bug: Ionic React App Repaints Entire Screen on Refresh

[seanaguinaga]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
The ionic React Starter Side Menu Application, or any Ionic React App for that matter, flashes to white during refresh and when loading as a PWA. (Cannot get ride of, makes Ionic React a nonviable solution as PWA or website.

Expected behavior:
The website or PWA should not entirely re-render/repaint/flash as if it was not a SPA/Client Side App.

Steps to reproduce:
Please visit https://ionicflash.netlify.com on either a desktop or mobile device and refresh the page.

Compare to any other react application, like https://app.preconceptiontest.com

When using a splash screen, the white screen created by Ionic React makes for a poor user experience. As seen in these video clips: Videos

Please add both apps to an iOS Home Screen to test:

https://preconception.app

https://app.preconceptiontest.com

their spash screen screens and all webmanifest files for iOS are identical, yet one provides a much better visual experience.

please close and restart both PWAs on iOS, and you'll see what I mean.

At this point, Ionic React is a non-starter from at least the visual perspective. The cause of this flash and it's notable duration even with a bare bones starter application with barely any code should be cause for concern if Ionic React is meant to delivery the same experience as a vanilla CRA app.

https://github.com/preconceptioncode/test (ionic side menu starter app)

Ionic info:

Ionic:

   Ionic CLI : 5.4.9

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.0
   npm    : 6.12.0
   OS     : Windows 10

[elylucas]

hi @seanaguinaga,

I've been working on some first render performance improvements and would like to see if you could give a dev build a shot and see if that helps this matter?

If so, install the dev builds with:

npm i @ionic/react@4.11.5-dev.201912042351.ba1679b @ionic/react-router@4.11.5-dev.201912042351.ba1679b

And let us know if it helps.

Thanks

[seanaguinaga]

Getting: backend.js:6 Error: Minified React error #185; visit https://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at yu (react-dom.production.min.js:5186) at Object.enqueueSetState (react-dom.production.min.js:3091) at t.w.setState (react.production.min.js:60) at t.value [as UNSAFE_componentWillReceiveProps] (Animate.js:119) at Ml (react-dom.production.min.js:3140) at Ji (react-dom.production.min.js:4231) at Na (react-dom.production.min.js:6674) at Mu (react-dom.production.min.js:5648) at Ou (react-dom.production.min.js:5637) at ku (react-dom.production.min.js:5393) Got an error in dev mode also. Sean Aguinaga On December 4, 2019 at 4:02 PM, Ely Lucas <notifications@github.com> wrote: hi @seanaguinaga, I've been working on some first render performance improvements and would like to see if you could give a dev build a shot and see if that helps this matter? If so, install the dev builds with: npm i @ionic/react@4.11.5-dev.201912042351.ba1679b @ionic/react-router@4.11.5-dev.201912042351.ba1679b And let us know if it helps. Thanks — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[elylucas]

@seanaguinaga

This might be caused from an error we had in the sidemenu starter template. Check your routes, and if your root route looks like this:

<Route path="/" render={() => } />

more the exact={true} from the Redirect to the Route like so:

<Route path="/" render={() => } exact={true} />

Let me know if that fixes it or wasn't the case.

[elylucas]

4.11.6 should help with this issue. Give it a try and let us know. Going to close this issue for now, but if the problem persists we can look further into it.

[seanaguinaga]

Updated to that version. My app doesn’t load. Thank You Sean Aguiñaga

…

On Dec 11, 2019, at 09:27, Ely Lucas ***@***.***> wrote:  4.11.6 should help with this issue. Give it a try and let us know. Going to close this issue for now, but if the problem persists we can look further into it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[elylucas]

Any errors that show up in the console?

[seanaguinaga]

No errors at all.

It also happens in 4.11.7

I have NO idea why? Could be a code layout thing?

[seanaguinaga]

Correction!

updating to ionic router 4.11.6 + makes the app blank.

Should I make an issue there?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.