Slow Page Transition with Flash Prevention Plugin

billmcgrane commented 8 months ago

🐞 Bug report

Description

🔬 Minimal Reproduction

Create Angular 16+ app using scullyio and the flash prevention plugin. Observe the transition time from the prerendered page to the dynamic page generated by the SPA.

💻Your Environment

Angular Version:



Angular CLI: 17.1.0
Node: 18.17.1
Package Manager: npm 8.18.0
OS: darwin arm64

Scully Version:



"@scullyio/init": "^2.1.41",
"@scullyio/ng-lib": "^2.1.41",
"@scullyio/scully": "^2.1.41",
"@scullyio/scully-plugin-flash-prevention": "^2.1.41",
"@scullyio/scully-plugin-puppeteer": "^2.1.41",

🔥 Exception or Error



"Scully is using timeouts, add the needed polyfills instead!"

The needed polyfill, zone.js/dist/task-tracking, is no longer exported as of Angular 16 
and therefore cannot be specified as a polyfill. This results in the transition from the 
prerendered to dynamic page taking much longer than normal.

billmcgrane commented 8 months ago

The behavior is seen with zone.js 0.14.3

hisham commented 5 months ago

I can confirm this is happening, we recently upgraded to angular 17.

@SanderElias - any planned fixes or recommended workarounds? Seems like an important issue.

billmcgrane commented 5 months ago

Try downgrading zone.js from 0.14.3 to 0.13.3.

[signature_3039004538] Bill McGrane Principal Architect P (817) 928-1634 | Elevate.comhttp://www.elevate.com/ 5080 Spectrum Drive, Suite 200E Addison, TX 75001

http://www.elevate.com/ Privileged and Confidential. This e-mail, and any attachments thereto, is intended only for use by the addressee(s) named herein and may contain privileged and/or confidential information. If you have received this e-mail in error, please notify me immediately by a return e-mail and delete this e-mail. You are hereby notified that any dissemination, distribution or copying of this e-mail and/or any attachments thereto, is strictly prohibited.

From: Hisham A @.> Date: Friday, March 29, 2024 at 6:37 PM To: scullyio/scully @.> Cc: Bill McGrane @.>, Author @.> Subject: Re: [scullyio/scully] Slow Page Transition with Flash Prevention Plugin (Issue #1675)

[EXTERNAL EMAIL: Please use caution when opening links and attachments]

I can confirm this is happening, we recently upgraded to angular 17.

@SanderEliashttps://github.com/SanderElias - any planned fixes or recommended workarounds? Seems like an important issue.

— Reply to this email directly, view it on GitHubhttps://github.com/scullyio/scully/issues/1675#issuecomment-2027823099, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AZBIBJW4LBKHAHB7OUMZXEDY2X3MVAVCNFSM6AAAAABCHOBKJKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRXHAZDGMBZHE. You are receiving this because you authored the thread.Message ID: @.***>

hisham commented 5 months ago

Thanks @billmcgrane for the message. Angular 17 however requires 0.14.3.

I ended up resolving this however. In Angular 17.3, I don't see any flash when moving from static to dynamic site. So there is no need for the flash prevention plugin from what I see. Angular seems to be doing something where it takes over the pre-rendered html without causing flash. It might be related to the non-destructive hydration improvements Angular recently made.

scullyio / scully