264. Showing a Loading Indicator

Jul 21, 2026 06:05 · 2:03 · English · Whisper Turbo · 2 Sprekers
Dit transcript verloopt in 7 dagen. Upgrade voor permanente opslag →
Lezingenindex
Uitsluitend tonen
0:01
S… Speaker 1 (264. Showing a Loading Indicator)
We're now outputting our loaded posts.
0:04
S… Speaker 1 (264. Showing a Loading Indicator)
We can refetch them here by clicking fetch,
0:06
S… Speaker 1 (264. Showing a Loading Indicator)
though we of course don't really see a difference here because we fetched the same posts
0:10
S… Speaker 1 (264. Showing a Loading Indicator)
and we have no indicator for whether a request is currently on its way
0:14
S… Speaker 1 (264. Showing a Loading Indicator)
or not whilst we're waiting for your response.
0:17
S… Speaker 1 (264. Showing a Loading Indicator)
Would be nice to have such an indicator.
0:19
S… Speaker 1 (264. Showing a Loading Indicator)
And that can be easily implemented by adding a new property,
0:23
S… Speaker 1 (264. Showing a Loading Indicator)
which you could name isLoading,
0:25
S… Speaker 1 (264. Showing a Loading Indicator)
which initially is false.
0:26
S… Speaker 1 (264. Showing a Loading Indicator)
And you wanna set isLoading
0:28
S… Speaker 1 (264. Showing a Loading Indicator)
or maybe let's name it is fetching because I only want to use it for fetching posts.
0:32
S… Speaker 1 (264. Showing a Loading Indicator)
And you can use is fetching and set it to true whenever you start fetching posts.
0:36
S… Speaker 1 (264. Showing a Loading Indicator)
So here at the beginning of this fetch posts.
0:38
S… Speaker 1 (264. Showing a Loading Indicator)
There you can set this is fetching to true because now we are starting
0:43
S… Speaker 1 (264. Showing a Loading Indicator)
to fetch posts.
0:44
S… Speaker 1 (264. Showing a Loading Indicator)
And once we're done,
0:45
S… Speaker 1 (264. Showing a Loading Indicator)
so here in the subscribe function,
0:47
S… Speaker 1 (264. Showing a Loading Indicator)
we can set this is fetching back to false.
0:50
S… Speaker 1 (264. Showing a Loading Indicator)
Now what's the advantage of this?
0:52
S… Speaker 2 (264. Showing a Loading Indicator)
Well,
0:52
S… Speaker 1 (264. Showing a Loading Indicator)
we can show a loading indicator whilst we're fetching posts.
0:56
S… Speaker 1 (264. Showing a Loading Indicator)
So back here in our template,
0:58
S… Speaker 1 (264. Showing a Loading Indicator)
we wanna show no posts available if we have
1:02
S… Speaker 1 (264. Showing a Loading Indicator)
no posts and also important,
1:04
S… Speaker 1 (264. Showing a Loading Indicator)
if we're not currently fetching,
1:07
S… Speaker 1 (264. Showing a Loading Indicator)
because if we are fetching posts,
1:08
S… Speaker 1 (264. Showing a Loading Indicator)
then we wanna wait for that result and not show no posts available too
1:13
S… Speaker 1 (264. Showing a Loading Indicator)
early.
1:13
S… Speaker 1 (264. Showing a Loading Indicator)
Of course,
1:14
S… Speaker 1 (264. Showing a Loading Indicator)
we also only want to output posts if we're currently not fetching too.
1:18
S… Speaker 1 (264. Showing a Loading Indicator)
So here,
1:19
S… Speaker 1 (264. Showing a Loading Indicator)
I also will output this only if we have posts and we're not fetching.
1:24
S… Speaker 1 (264. Showing a Loading Indicator)
This of course means we have a third scenario now that we are
1:28
S… Speaker 1 (264. Showing a Loading Indicator)
fetching and we don't care about whether we have posts or not.
1:31
S… Speaker 1 (264. Showing a Loading Indicator)
And for this,
1:32
S… Speaker 1 (264. Showing a Loading Indicator)
you could output simply loading or display a nice CSS
1:36
S… Speaker 1 (264. Showing a Loading Indicator)
spinner if you wanted to by using ngif equal
1:40
S… Speaker 1 (264. Showing a Loading Indicator)
is fetching.
1:42
S… Speaker 1 (264. Showing a Loading Indicator)
Now, let's have a look at that.
1:44
S… Speaker 1 (264. Showing a Loading Indicator)
Let's reload and you see loading here and if I click fetch post again,
1:48
S… Speaker 1 (264. Showing a Loading Indicator)
you see loading.
1:48
S… Speaker 1 (264. Showing a Loading Indicator)
Now, unfortunately,
1:50
S… Speaker 1 (264. Showing a Loading Indicator)
kind of,
1:51
S… Speaker 1 (264. Showing a Loading Indicator)
Firebase is really fast and therefore you only see this for a fraction of
1:55
S… Speaker 1 (264. Showing a Loading Indicator)
a second, but you see it does work.
1:57
S… Speaker 1 (264. Showing a Loading Indicator)
And if you had a slower server,
1:59
S… Speaker 1 (264. Showing a Loading Indicator)
you would of course see it a bit longer.

Dit transcript werd gegenereerd door AI (automatische spraakherkenning). Kan fouten bevatten..verifieer tegen de oorspronkelijke audio voor kritisch gebruik. AI-beleid

❤️ Hou je van STT.ai? Vertel het je vrienden!
Samenvatting
Klik op Summarize om een AI samenvatting van dit transcript te genereren.
Samengevat...
Vraag AI over dit Transcript
Vraag maar iets over dit transcript De AI zal relevante secties en antwoord vinden.
Een andere transcriberen