flash of original text

[bmuller]

You should load the JS first, hide the body, then render, then show the body - so you don't see the flash of the plain text on load.

[rileytg]

+1 for @bmuller's solution

[JAStanton]

He could have a style node with * { display: none } which works on text nodes like the one he has on his page. This way he wouldn't have to have wrap his text node with an ugly nasty extra element node 😉 . Also if you wanted to be fancy he could have

* {
  opacity: 0;
  transition: opacity 0.3s;
}

and javascript could change opacity to 1 when done... nice little fade in.

[mikepurvis]

Simplest solution would be just to move the <script> node to the top of the page; that gives you a lot of flexibility about how to deal with it— for example, you could document.write in a hide-all CSS rule, and also register a handler for the document.load event.

[RoyTinker]

This is also known as a FUOC (Flash Of Unstyled Content) - http://en.wikipedia.org/wiki/Flash_of_unstyled_content

[mikepurvis]

Similar-looking symptom, but very different cause— a FOUC is HTML which is shown without CSS. This is markdown which is shown prior to the Javascript template processing.

[sg-s]

bump.

[xeoncross]

Like @mikepurvis said, moving the <script> tag to the top of the page would probably be the best way to handle this.

The first thing we do when Jr loads is to hide the body, show the spinner, load the rest of the assets, convert to HTML, then show the finalized document.

We could follow @JAStanton's advice and insert another <style type="text/css"> into the page, but I would rather find a non-markup based approach to solve this so we don't have repeat hacks like that on every page.

[sg-s]

if i move the script tag to the top, nothing is rendered -- i just see the markdown. i guess something else is needed too.

[leoncvlt]

Confirm the simply moving <script> to the top is not working. The funny thing is that when trying the jr.js demo, this issue does not occur, but it is present when hosting the demo myself somewhere else.