search

BuilderIO / builder

Visual Development for React, Vue, Svelte, Qwik, and more
https://builder.io
MIT License
7.45k stars 932 forks source link

Content hydration on latest Angular makes content flash #19

Closed steve8708 closed 4 years ago

steve8708 commented 4 years ago

Example vid - https://drive.google.com/file/d/1Ro4_AZrggX5Rwag8BoNTkq1JeVLp-NxX/view

Spectrum thread (private) - https://spectrum.chat/builder/knowde/blinking-builder-io-angular-content-while-replacing-from-second-request~fcbb3eb3-ac1b-48d0-b9bb-d5e48d58cdb1

2 things we can do here

One is offer a prerender=false option to only render in the builder-webcomponent-element. This is a quick fix, but we should also fix the underlying issue

Other SDKs that hydrate don't have this flashing issue so should be fixable in angular as well

lyczos commented 4 years ago

@steve8708 I will take a look at angular SDK

steve8708 commented 4 years ago

Cool @lyczos, put @ca136 on this to take a peek too but if you find a solution sooner don't hesitate to send PR! In meantime @ca136 can focus on the other open tickets first

ca136 commented 4 years ago

Some background on at least one of the issues we've seen in the past with Universal: https://github.com/angular/universal/issues/1184#issuecomment-506135093

When you configure RouterModule, you'll want to make sure initialNavigation: 'enabled' is set.

The Preboot library also helps prevent the visible re-render on the client:

Lastly, I do see something going on with the builder web component SDK that is causing a re-render before it should. I need to do some more digging, but will update this ticket with more information when I have it!

ca136 commented 4 years ago

I've been working on the example application in the repo and have sent a PR that adds preboot and improves the first re-render during the client transition.

JefferyReidKnowde commented 4 years ago

Any update on this? This issue is preventing us from going live with Builder on our site.

steve8708 commented 4 years ago

This is now fixed - was an issue in the webcomponents library when passed an option used by the angular SDK. The fix is now deployed via our CDN so no work needs to be done on your end to have the fixed code. This will be live once cache clears in the next couple hours, and you can preview the update here https://staging.knowde.com/?builder.wcVersion=1.0.127