Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Sander Elias
    @SanderElias
    @Tronquin Cool, Id you like we can add you to the showcase page shortly. (you can do an PR and make the wait shorter!)
    Alexander Spies
    @dyingangel666
    for me the flicker is only when dev tools are open and cache is disabled
    without the cache disabled option active the flash is gone
    6 replies
    Martin
    @maku
    Hi, dumb question, when I have cloned the scully repository , how do I run e.g. the sample-blog?. In an ordinary nx repo I would assume : "nx serve sample-blog". But it seems I have to build something before ... (In package.json etc. I can not see what have to be done). Any hints?
    Steve Day
    @SteveDa79131270_twitter
    image.png
    Martin
    @maku
    Ok it seems you have to run: "nx build ng-lib" etc..
    Steve Day
    @SteveDa79131270_twitter
    @wickstargazer hi there - think the npm repo isn't available with the following. command : npm install scully-plugin-angular-delay --save-dev (followed instructions here : https://npm.runkit.com/%40flowaccount%2Fscully-plugin-angular-delay)
    Steve Day
    @SteveDa79131270_twitter
    used: npm i @flowaccount/scully-plugin-angular-delay instead and this worked!
    Steve Day
    @SteveDa79131270_twitter
    Is there a known issue with flexbox and scully? The pre-rendered version stacks the components vertically where as the angular version stacks horizontally if the screen width permits?
    Alexander Spies
    @dyingangel666
    not really because DOM and styling should be the same no matter if it's the angular or scully rendered page
    Sander Elias
    @SanderElias
    the default browser width of puppeteer is 800px. those settings can be altered using the puppeteer options.
    Alexander Spies
    @dyingangel666
    oh really, nice to know. in my case all is fine and i have not set a custom width in the puppeteer options
    Sander Elias
    @SanderElias
    Howver, you should be using CSS for styling, and it shouldn't make a difference anyhow.
    Steve Day
    @SteveDa79131270_twitter
    image.png
    Steve Day
    @SteveDa79131270_twitter
    image.png
    here's the difference (above is pre-rendered javascript disabled) and ( below is scully after angular js has loaded)
    MichielKikkert
    @michielkikkert
    @wickstargazer - I'd like to try your delay plugin - the repo link on NPM doesn't work though - do you have it somewhere on Github where I could look at the source?
    @SteveDa79131270_twitter - do you determine your available width or your flex config programmatically somewhere..?
    Steve Day
    @SteveDa79131270_twitter
    image.png
    it's in the html :)
    Sander Elias
    @SanderElias
    @SteveDa79131270_twitter Well, the flex module uses JS to calculate stuff. So, differences are to be expected. There is not much we can do about that.
    Switch to CSS grid or CSS flexbox without JS involvement. Really, it should not be needed nowaday's to use JS to calculate width's
    Steve Day
    @SteveDa79131270_twitter
    you are right Sander - we'll switch to CSS
    Alexander Spies
    @dyingangel666
    is there a bug with transferstateservice? it's working and the data is inlined with the scully build
    <script id="ScullyIO-transfer-state">window['ScullyIO-transfer-state']=/** ___SCULLY_STATE_START___ */{"products":[...]</script>
    but getState isn't working
    Sander Elias
    @SanderElias
    @dyingangel666 both get and setState are well tested in our automated tests.
    If they don't work, we can't push out updates.
    33 replies
    Steve Day
    @SteveDa79131270_twitter
    does anyone know the fully path to scully? seems to have stopped working after installing the plugin!
    image.png
    Sander Elias
    @SanderElias
    try npm run scully
    Steve Day
    @SteveDa79131270_twitter
    works thanks :)
    Steve Day
    @SteveDa79131270_twitter
    Hi all - another fun challenge! I'm using the new angular delay plugin which works really well with the initial render but after the delay 1500ms - there's a white screen when angular finally bootstraps! https://footballmatcher.io has the issue! @wickstargazer is there a way of preventing the white screen!?
    Sander Elias
    @SanderElias
    Looks like an 'page-loading' animation kicking in.
    Material design has those, you need to disable those
    Steve Day
    @SteveDa79131270_twitter
    thanks sander do you know how to disable marterial?
    Sander Elias
    @SanderElias
    I know it is possible. don't know how, its ages ago since I used material.
    Alexander Spies
    @dyingangel666
    only the animation can be disabled when using the NoopAnimationsModule instead of browseranimationsmodule
    Steve Day
    @SteveDa79131270_twitter
    image.png
    Steve Day
    @SteveDa79131270_twitter
    just as encouragement to everyone - scully + service worker + delay plugin gives utlra fast performane
    Alexander Spies
    @dyingangel666
    noice, good job
    Bildschirmfoto 2020-05-19 um 14.02.37.png
    :P
    but you still have the flash, no matter if the page is cached or not :(
    Sander Elias
    @SanderElias
    preventing the flash is hard in some sites.
    Steve Day
    @SteveDa79131270_twitter
    thanks i'll give this ago!
    Sander Elias
    @SanderElias
    the main problem, Angular starts off by erasing everything that is inside your app tag.
    and then redraws everything.
    There is currently no way to prevent this. All you can do is make sure all data is available before angular starts, s the redraw can be done in 1 cycle, this is the only way you don't notice the flash (while it is technically still there)
    Wick
    @wickstargazer
    Hi! Baby just slept!
    I actually suceeded in most minimal flash but it needs working on the individual apps to setup the states
    I am writing a blog about it but am currently deploying our site for final testing
    It uses the concept from misko hevry talk about state decorators will update once i have the blog up
    Steve Day
    @SteveDa79131270_twitter
    Maybe if i reduce the delayMilliseconds from 1500ms to less it would reduce the flash?
    image.png