Knockout 'flickering' issue

Question

I'm building a SPA (Single Page Application) using KO. the application looks like a book and the user can flip pages.

The problem is that every time a page loads, there is a short moment where the page 'flickers' and the user sees the unstyled version of the page. I guess this is caused due to the fact that a lot of the styling is dependant on ko bindings so until ko finishes it 'magic' the user gets a glimpse of the unstyled code.

Is it possible to tell when KO finished all its bindings and only then show the page?

I've managed to partially solve it by setting a timeout before loading the view but of course this is not a good solution.

Defazio

you could possibly look to rework how your page bindings are done. Can't tell much by not seeing code, but you could deal with your page renders, and assign your observables on the page using the afterRender binding – Monoploid

Answer 1

Yes, it is very easy actually. Apply display:none to the top level div (or w/e container), and data-bind="visible: true". This will cause the page to be hidden until knockout unhides it via binding (which obviously can't happen until its fully loaded).

Since you are using a non-observable value, Knockout won't even bother to re-check this again. There shouldn't be a performance concern after the initial binding.

Franzen

Sounds like a cool idea, i'll try it and if it works i'll be sure to mark your answer :) – Defazio

Just to expand on this, you can apply the binding to a "loading" animation DIV that overlays the area you where you're trying to prevent flicker. Once the main application initializes, you can hide the overlay, revealing the application. One advantage to this is that the logical "visibility" of the application elements are undisturbed, so any binding/setup logic can still operate correctly. One other thing - if displaying automatically when KO processing the binding isn't sufficient, you may want to bind to a flag in your view model you set to indicate when your initialization is complete. – Sickly

What I see with the answer chosen is that the element, that is initially hidden, flashes on after the page loads. Which I think is fine for my purpose. If I do the opposite, make it visible, then use the knockout visible binding to hide it, I think the effect is worse. I need both because the element should be shown/hidden based on other state on the page, which changes as the user interacts with it. Any ides for this case? – Casey

Yea, just change the visible binding to use whatever observable tracks the state your intereste din – Franzen

it's more reliable to apply static css to the target element, then execute JS to remove the style (via ko.subscribe, or more explicitly, such as: after calling ko.applyBindings, or in a callback to whatever init/ajax methods you may call before showing a view.) the problem with using static true/false values and then relying on data-bind is that the eval is deferred until ko.applyBindings has begun execution, whereas static css is applied at the time the markup is evaluated (pre-render.) removing the style via JS allows you to truly defer display until after the binding is complete – Beamer

I don't think that is correct. Style attribues and static css both apply at the time markup is evaluated. data-bind attributes are observables. They are JS that is applied by ko.applyBindings binding being complete. They are one in the same. – Franzen

Cannot upboat this answer enough! – Stine

Answer 2

I think this was answered better previously by using templates.

What is the best way to hide the screen while knockout js bindings are being built?

Medicare