Element loaded before applying stylesheet.

[Rizary]

Hi, I have app using mainWidgetWithHead headElement bodyElement, headElement contains function to load stylesheet like the following:

styleSheet link = elAttr "link" (Map.fromList [
      ,  ("rel", "stylesheet")
      ,  ("type", "text/css")
      ,  ("href", link)
  ]) $ return ()

When I run the app (I'm using GHCJS), the glitch that i have is whenever i reload the page (ctrl + shift R), it seems that my form appearing before the page loaded completely (under 1 second) which is supposed to be hidden by default. The style that i'm using is only for changing the display attribute from block to none and vice versa.

It also happens to other member as quoted

When the page would load it woiuld look like my elements were position at the top left corner of the page then slide to their correct position.

right now, my assupmtion is because runmain.js loaded at the end of the html structure and I use to load css file in my headElement however, if i put the .css file in the .html, and remove the css from headElement the css is not recognized at all. maybe because i use mainWidgetWithHead.

I have post it in #reflex-frp and want to documented it here.

[dfordivam]

I think these kind of issues will be resolved when the hydration work being done by @tomsmalley lands in reflex-dom..

[Rizary]

@dfordivam hi, do you have a link about the hydration?

[dfordivam]

@Rizary unfortunately I dont have anything to share at the moment. But I can say that the feature is similar to this https://ssr.vuejs.org/guide/hydration.html, the ongoing work is in ts-hydration branch and the release is expected within few weeks.

[tomsmalley]

Hydration won't solve this alone: it also requires static rendering to be used, but it looks like you aren't making use of the static renderer. You might want to try https://github.com/obsidiansystems/obelisk which does this for you - I think this might solve the CSS issue you currently see, but perhaps hydration is required on top of the regular static renderer to make things really smooth. As @dfordivam says, it'll be landing soon.

If you are only interested in a static site, you could achieve the same as above by placing the stylesheet into the head element of your index.html and switching to using mainWidget. This way the stylesheet should be loaded before the JS runs.

A further option for static sites is to use domEvent Load on the stylesheet element, switch to using mainWidgetWithHead' so you can pass this to the body widget, and wait for it before switching to your app with runWithReplace or similar.

[Rizary]

@tomsmalley my project is using nodejs as a backend and I'm not sure how to implement it in my project. Is it similar to renderStatic? Would you point me to where obelisk use the static renderer?

Since it labelled wontfix and this is a currently ongoing project which is not using obelisk yet.

I have another project that I may use obelisk though.

[ali-abrar]

Dropping the "wontfix" label. We should document how hydration might be used outside of the context of obelisk - not every reflex-dom project will use obelisk, after all.