264. Showing a Loading Indicator

Jul 21, 2026 06:05 · 2:03 · English · Whisper Turbo · 2 वक्ता

यो प्रतिलिपि यसमा म्याद समाप्त हुन्छ 7 दिन स्थायी भण्डारणका लागि स्तरबृद्धि गर्नुहोस् →

पढाइ अनुक्रमणिका

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.

यो प्रतिलिपि AI (स्वचालित वक्तव्य पहिचान) द्वारा उत्पन्न गरिएको थियो । त्रुटि समावेश गर्न सक्छ - महत्वपूर्ण प्रयोगका लागि मौलिक अडियोसँग रुजु गर्नुहोस् । AI नीति

❤️ प्रेम STT.ai? आफ्नो साथीहरूलाई भन्नुहोस्!

सारांश

यो लिखितको AI सारांश उत्पन्न गर्न सारांश गर्नुहोस् क्लिक गर्नुहोस् ।

यो प्रतिलिपि बारे AI सोध्नुहोस्

यो transcript बारेमा केही सोध्नुहोस् - एआई सम्बन्धित खण्डहरू र जवाफ पाउनुहुनेछ.

अर्को प्रतिलिपि गर्नुहोस्