Now a little note at this point here,
when you reload the page,
you see a little flickering of some of the text here.
The text that we don't have any to do's,
or that were loading.
And you'll see that until all the to do data is there.
You see this flickering
because the way we load and run
our JavaScript code at the moment,
works such that we download all the view framework code.
And then run all the view framework code.
And load and run our own code,
after all the DOM has been parsed.
Which means we only start loading the code
that takes control over the DOM,
and changes what's on the screen,
after all the DOM has been parsed by the browser.
Now loading the view framework code is quick,
which is why we only see it flicker for some milliseconds.
But it still takes those extra milliseconds.
Now, if you want to prevent that flickering,
you could simply remove defer
from that view framework import here.
But leave it on your own code.
By doing that, you force the browser
to first load all the view framework code,
and then parse the DOM.
Which means it only starts parsing the DOM
after it has this essential view framework code.
And then it executes our own code.
But our own code, of course,
is loaded and executed quickly
because it's not a lot of code.
The view framework code is way more
because all the behind the scenes logic is in there.
And with this approach,
you then ensure that there is no flickering,
as you can see if you reload now.
Because now, the view framework code is already there,
before the DOM is parsed.
And therefore it's then able to take over instantly
and prevent showing text on the page
that shouldn't be shown.
You only see loading flicker sometimes here
because that indeed is some text we show,
whilst we are loading the to do's from the API.
And even though the API is super quick,
sometimes it takes that extra millisecond.
And that's when we see loading here on the screen.