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.

Accepted Answer

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.

Knockout 'flickering' issue

Solution

Problem