Slow Page Transition with Flash Prevention Plugin

[billmcgrane]

🐞 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]

The behavior is seen with zone.js 0.14.3

[hisham]

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]

Try downgrading zone.js from 0.14.3 to 0.13.3. [signature_3039004538] Bill McGrane Principal Architect P (817) 928-1634 | Elevate.com<http://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. @SanderElias<https://github.com/SanderElias> - any planned fixes or recommended workarounds? Seems like an important issue. — Reply to this email directly, view it on GitHub<#1675 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AZBIBJW4LBKHAHB7OUMZXEDY2X3MVAVCNFSM6AAAAABCHOBKJKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRXHAZDGMBZHE>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[hisham]

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.