264. Showing a Loading Indicator

Jul 21, 2026 06:05 · 2:03 · English · Whisper Turbo · 2 Mpitondra teny

Tapitra ao anatin'ny 7 andro. Handefa ny rakitra ho any amin'ny toerana tsy miova →

Fisokajin'ny laha-tahiry

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.

IA (fifandraisana amin'ny feo) no namorona ity dika mitovin'ny soratra ity. Mety misy tsy fetezana - jereo ny feo voalohany raha mila ampiasaina amin'ny fomba henjana. Politikan'ny AI

Tianao ve ny STT.ai? Lazao amin'ny namanao!

Famintinana

Tsindrio ny Famaritana mba hamoronana famintinana AI an'ity dika mitovy ity.

Manontany ny AI momba ity dika mitovy ity

Manontany zavatra momba ity dika mitovy ity — hahita ny ampahany mifandraika amin'izany ny AI ary hamaly.

Adikao ny hafa