1
00:00:02,050 --> 00:00:04,620
Now a little note at this point here,

2
00:00:04,620 --> 00:00:06,850
when you reload the page,

3
00:00:06,850 --> 00:00:11,040
you see a little flickering of some of the text here.

4
00:00:11,040 --> 00:00:13,470
The text that we don't have any to do's,

5
00:00:13,470 --> 00:00:15,280
or that were loading.

6
00:00:15,280 --> 00:00:18,670
And you'll see that until all the to do data is there.

7
00:00:18,670 --> 00:00:20,450
You see this flickering

8
00:00:20,450 --> 00:00:22,450
because the way we load and run

9
00:00:22,450 --> 00:00:24,860
our JavaScript code at the moment,

10
00:00:24,860 --> 00:00:29,000
works such that we download all the view framework code.

11
00:00:29,000 --> 00:00:31,620
And then run all the view framework code.

12
00:00:31,620 --> 00:00:34,000
And load and run our own code,

13
00:00:34,000 --> 00:00:36,480
after all the DOM has been parsed.

14
00:00:36,480 --> 00:00:38,650
Which means we only start loading the code

15
00:00:38,650 --> 00:00:40,680
that takes control over the DOM,

16
00:00:40,680 --> 00:00:42,690
and changes what's on the screen,

17
00:00:42,690 --> 00:00:46,210
after all the DOM has been parsed by the browser.

18
00:00:46,210 --> 00:00:49,060
Now loading the view framework code is quick,

19
00:00:49,060 --> 00:00:52,550
which is why we only see it flicker for some milliseconds.

20
00:00:52,550 --> 00:00:56,070
But it still takes those extra milliseconds.

21
00:00:56,070 --> 00:00:58,170
Now, if you want to prevent that flickering,

22
00:00:58,170 --> 00:01:00,410
you could simply remove defer

23
00:01:00,410 --> 00:01:03,550
from that view framework import here.

24
00:01:03,550 --> 00:01:05,920
But leave it on your own code.

25
00:01:05,920 --> 00:01:08,090
By doing that, you force the browser

26
00:01:08,090 --> 00:01:11,670
to first load all the view framework code,

27
00:01:11,670 --> 00:01:13,750
and then parse the DOM.

28
00:01:13,750 --> 00:01:16,210
Which means it only starts parsing the DOM

29
00:01:16,210 --> 00:01:19,450
after it has this essential view framework code.

30
00:01:19,450 --> 00:01:22,240
And then it executes our own code.

31
00:01:22,240 --> 00:01:23,910
But our own code, of course,

32
00:01:23,910 --> 00:01:25,770
is loaded and executed quickly

33
00:01:25,770 --> 00:01:27,500
because it's not a lot of code.

34
00:01:27,500 --> 00:01:29,620
The view framework code is way more

35
00:01:29,620 --> 00:01:32,780
because all the behind the scenes logic is in there.

36
00:01:32,780 --> 00:01:34,400
And with this approach,

37
00:01:34,400 --> 00:01:36,630
you then ensure that there is no flickering,

38
00:01:36,630 --> 00:01:38,660
as you can see if you reload now.

39
00:01:38,660 --> 00:01:41,930
Because now, the view framework code is already there,

40
00:01:41,930 --> 00:01:43,630
before the DOM is parsed.

41
00:01:43,630 --> 00:01:46,680
And therefore it's then able to take over instantly

42
00:01:46,680 --> 00:01:49,470
and prevent showing text on the page

43
00:01:49,470 --> 00:01:50,893
that shouldn't be shown.

44
00:01:51,820 --> 00:01:54,590
You only see loading flicker sometimes here

45
00:01:54,590 --> 00:01:57,170
because that indeed is some text we show,

46
00:01:57,170 --> 00:02:00,630
whilst we are loading the to do's from the API.

47
00:02:00,630 --> 00:02:02,780
And even though the API is super quick,

48
00:02:02,780 --> 00:02:05,230
sometimes it takes that extra millisecond.

49
00:02:05,230 --> 00:02:07,943
And that's when we see loading here on the screen.