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.

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.

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?