https://angularfirebase.com/lessons/show-loading-spinners-for-firebase-data/

In this episode, I will show you how to display and hide a loading spinner when retrieving asynchronous Firebase data from an Angular application. Loading indicators are an important UI feature because they show the end user when more data is incoming.  

Step 1 - Create the Spinner component

We're going to create a SpinnerComponent that can be reused throughout the application. To make it look cool, I am using Spinkit CSS library, which we can just be copied directly into the component's CSS and HTML files. You do not need to change anything in the component's TypeScript. 

Step 2 - Retrieve Aschronous Data

We need to load some data from Firebase to make use of the spinner.  

In this example, I am loading a `FirebaseListObservable` via the AngularFire2 package. The actual data is just and array of items from a to-do list.  This code was originally created for the RealTime Database video, so check that out if you want to learn more about asynchronous data streams. 

Step 3 - Show and Hide the Spinner

We want to show the spinner in the items-list component while data is being retried.

First, we define a variable called `showSpinner` in the component and set it to true by default. During `ngOnInit`, the data is requested from the service as a `FirebaseListObservable`. We can determine if the data has been loaded by subscribing to it. The function inside the subscribe call will be executed after the observable emits data, so we can simply set `showSpinner` variable to false when this happens. 

In the template, we can use the `*ngIf` directive with the `showSpinner` variable to control the visibility spinner. 

Going back to the app, we can see that spinner is visible for a split second before the data is loaded. The longer it takes for your data the load, the more useful this spinner will be your end users. 

That's it for loading spinners, see you next time.
2024-02-04T08:36:42.951Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
afff5d92-35db-4135-9cc9-469355db2a81
b9c891bd99de273e88f6cce0de966021ef7072c4a7b17bca6fe05b1e6b531aca
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, I will show you how to display and hide a loading spinner when retrieving asynchronous Firebase data from an Angular application.
Loading indicators are an important user interface feature because they show the end user when more data is incoming.
Step 1.
Create the spinner component.
We're going to create a spinner component that can be reused throughout the application.
To make it look cool, I'm gonna use the SpinKit CSS library, which can just be copied directly into the component's CSS and HTML files.
At this point, you don't need to change anything in the components typescript.
Step 2, retrieve asynchronous data.
We need to load some data from Firebase in order to make use of the spinner.
In this example, I'm loading a Firebase list observable via the AngularFire 2 package.
The actual data is just an array of items from a to do list.
This code was originally created for the real time database video, so check out it if you wanna learn more about asynchronous data streams from Firebase.
Step 3, show and hide the spinner.
We want to show the spinner in the item's list component when the data is being retrieved.
1st, we define a variable called show spinner in the component and set it to true by default.
During the n g on a net life cycle hook, the data is requested from the service as the Firebase list observable.
We can determine if the data has been loaded by subscribing to it.
The function inside the subscribe call will executed after the observable emits some data.
So we can simply set the show spinner variable to false once this happens.
In the template, we can use the n g if directive with the show spinner variable to control the visibility of the the spinner component itself.
Going back to the app, we can see the spinner is visible for a split second before the data is loaded.
The longer it takes for your data to load, the more useful the spinner is going to be for your end users.
That's it for loading spinners.
See you next time.

Speaker 0: In this episode, I will show you how to display and hide a loading spinner when retrieving asynchronous Firebase data from an Angular application. Loading indicators are an important user interface feature because they show the end user when more data is incoming. Step 1. Create the spinner component. We're going to create a spinner component that can be reused throughout the application.

To make it look cool, I'm gonna use the SpinKit CSS library, which can just be copied directly into the component's CSS and HTML files. At this point, you don't need to change anything in the components typescript. Step 2, retrieve asynchronous data. We need to load some data from Firebase in order to make use of the spinner. In this example, I'm loading a Firebase list observable via the AngularFire 2 package.

The actual data is just an array of items from a to do list. This code was originally created for the real time database video, so check out it if you wanna learn more about asynchronous data streams from Firebase. Step 3, show and hide the spinner. We want to show the spinner in the item's list component when the data is being retrieved. 1st, we define a variable called show spinner in the component and set it to true by default.

During the n g on a net life cycle hook, the data is requested from the service as the Firebase list observable. We can determine if the data has been loaded by subscribing to it. The function inside the subscribe call will executed after the observable emits some data. So we can simply set the show spinner variable to false once this happens. In the template, we can use the n g if directive with the show spinner variable to control the visibility of the the spinner component itself.

Going back to the app, we can see the spinner is visible for a split second before the data is loaded. The longer it takes for your data to load, the more useful the spinner is going to be for your end users. That's it for loading spinners. See you next time.
In this episode, I will show you how to display and hide a loading spinner when retrieving asynchronous Firebase data from an Angular application. Loading indicators are an important user interface feature because they show the end user when more data is incoming. Step 1. Create the spinner component. We're going to create a spinner component that can be reused throughout the application. To make it look cool, I'm gonna use the SpinKit CSS library, which can just be copied directly into the component's CSS and HTML files. At this point, you don't need to change anything in the components typescript.
animation
Step 2, retrieve asynchronous data. We need to load some data from Firebase in order to make use of the spinner.
In this example, I'm loading a Firebase list observable via the AngularFire 2 package. The actual data is just an array of items from a to do list. This code was originally created for the real time database video, so check out it if you wanna learn more about asynchronous data streams from Firebase.
databases
data
Step 3, show and hide the spinner. We want to show the spinner in the item's list component when the data is being retrieved. 1st, we define a variable called show spinner in the component and set it to true by default.
During the n g on a net life cycle hook, the data is requested from the service as the Firebase list observable. We can determine if the data has been loaded by subscribing to it. The function inside the subscribe call will executed after the observable emits some data. So we can simply set the show spinner variable to false once this happens.
data
In the template, we can use the n g if directive with the show spinner variable to control the visibility of the the spinner component itself. Going back to the app, we can see the spinner is visible for a split second before the data is loaded. The longer it takes for your data to load, the more useful the spinner is going to be for your end users. That's it for loading spinners. See you next time.
In this episode, I will show you how to display and hide a loading spinner when retrieving asynchronous Firebase data from an Angular application. Loading indicators are an important user interface feature because they show the end user when more data is incoming. Step 1. Create the spinner component. We're going to create a spinner component that can be reused throughout the application. To make it look cool, I'm gonna use the SpinKit CSS library, which can just be copied directly into the component's CSS and HTML files. At this point, you don't need to change anything in the components typescript. Step 2, retrieve asynchronous data. We need to load some data from Firebase in order to make use of the spinner. In this example, I'm loading a Firebase list observable via the AngularFire 2 package. The actual data is just an array of items from a to do list. This code was originally created for the real time database video, so check out it if you wanna learn more about asynchronous data streams from Firebase. Step 3, show and hide the spinner. We want to show the spinner in the item's list component when the data is being retrieved. 1st, we define a variable called show spinner in the component and set it to true by default. During the n g on a net life cycle hook, the data is requested from the service as the Firebase list observable. We can determine if the data has been loaded by subscribing to it. The function inside the subscribe call will executed after the observable emits some data. So we can simply set the show spinner variable to false once this happens. In the template, we can use the n g if directive with the show spinner variable to control the visibility of the the spinner component itself. Going back to the app, we can see the spinner is visible for a split second before the data is loaded. The longer it takes for your data to load, the more useful the spinner is going to be for your end users. That's it for loading spinners. See you next time.
In
in
this
this
episode,
episode
I
i
will
will
show
show
you
you
how
how
to
to
display
display
and
and
hide
hide
a
a
loading
loading
spinner
spinner
when
when
retrieving
retrieving
asynchronous
asynchronous
Firebase
firebase
data
data
from
from
an
an
Angular
angular
application.
application
Loading
loading
indicators
indicators
are
are
an
an
important
important
user
user
interface
interface
feature
feature
because
because
they
they
show
show
the
the
end
end
user
user
when
when
more
more
data
data
is
is
incoming.
incoming
Step
step
1.
1
Create
create
the
the
spinner
spinner
component.
component
We're
we're
going
going
to
to
create
create
a
a
spinner
spinner
component
component
that
that
can
can
be
be
reused
reused
throughout
throughout
the
the
application.
application
To
to
make
make
it
it
look
look
cool,
cool
I'm
i'm
gonna
gonna
use
use
the
the
SpinKit
spinkit
CSS
css
library,
library
which
which
can
can
just
just
be
be
copied
copied
directly
directly
into
into
the
the
component's
component's
CSS
css
and
and
HTML
html
files.
files
At
at
this
this
point,
point
you
you
don't
don't
need
need
to
to
change
change
anything
anything
in
in
the
the
components
components
typescript.
typescript
Step
step
2,
2
retrieve
retrieve
asynchronous
asynchronous
data.
data
We
we
need
need
to
to
load
load
some
some
data
data
from
from
Firebase
firebase
in
in
order
order
to
to
make
make
use
use
of
of
the
the
spinner.
spinner
In
in
this
this
example,
example
I'm
i'm
loading
loading
a
a
Firebase
firebase
list
list
observable
observable
via
via
the
the
AngularFire
angularfire
2
2
package.
package
The
the
actual
actual
data
data
is
is
just
just
an
an
array
array
of
of
items
items
from
from
a
a
to
to
do
do
list.
list
This
this
code
code
was
was
originally
originally
created
created
for
for
the
the
real
real
time
time
database
database
video,
video
so
so
check
check
out
out
it
it
if
if
you
you
wanna
wanna
learn
learn
more
more
about
about
asynchronous
asynchronous
data
data
streams
streams
from
from
Firebase.
firebase
Step
step
3,
3
show
show
and
and
hide
hide
the
the
spinner.
spinner
We
we
want
want
to
to
show
show
the
the
spinner
spinner
in
in
the
the
item's
item's
list
list
component
component
when
when
the
the
data
data
is
is
being
being
retrieved.
retrieved
1st,
1st
we
we
define
define
a
a
variable
variable
called
called
show
show
spinner
spinner
in
in
the
the
component
component
and
and
set
set
it
it
to
to
true
true
by
by
default.
default
During
during
the
the
n
n
g
g
on
on
a
a
net
net
life
life
cycle
cycle
hook,
hook
the
the
data
data
is
is
requested
requested
from
from
the
the
service
service
as
as
the
the
Firebase
firebase
list
list
observable.
observable
We
we
can
can
determine
determine
if
if
the
the
data
data
has
has
been
been
loaded
loaded
by
by
subscribing
subscribing
to
to
it.
it
The
the
function
function
inside
inside
the
the
subscribe
subscribe
call
call
will
will
executed
executed
after
after
the
the
observable
observable
emits
emits
some
some
data.
data
So
so
we
we
can
can
simply
simply
set
set
the
the
show
show
spinner
spinner
variable
variable
to
to
false
false
once
once
this
this
happens.
happens
In
in
the
the
template,
template
we
we
can
can
use
use
the
the
n
n
g
g
if
if
directive
directive
with
with
the
the
show
show
spinner
spinner
variable
variable
to
to
control
control
the
the
visibility
visibility
of
of
the
the
the
the
spinner
spinner
component
component
itself.
itself
Going
going
back
back
to
to
the
the
app,
app
we
we
can
can
see
see
the
the
spinner
spinner
is
is
visible
visible
for
for
a
a
split
split
second
second
before
before
the
the
data
data
is
is
loaded.
loaded
The
the
longer
longer
it
it
takes
takes
for
for
your
your
data
data
to
to
load,
load
the
the
more
more
useful
useful
the
the
spinner
spinner
is
is
going
going
to
to
be
be
for
for
your
your
end
end
users.
users
That's
that's
it
it
for
for
loading
loading
spinners.
spinners
See
see
you
you
next
next
time.
time
success
The speaker explains how to display and hide a loading spinner when retrieving asynchronous Isabel data from an Angular application. They provide step 1, creating a spinner component, and step 2, retrieving data from ante. The speaker explains how to set the show spinner variable and how to control visibility for the spinner component. They conclude by discussing how to load a split second before the data is loaded and how to use the spinner for end-users.
Loading Spinners for Asynchronous Firebase Data
In this episode, I will show you how to display and hide a loading spinner when retrieving asynchronous Firebase data from an Angular application. Loading indicators are an important user interface feature because they show the end user when more data is incoming. Step 1. Create the spinner component. We're going to create a spinner component that can be reused throughout the application. To make it look cool, I'm gonna use the SpinKit CSS library, which can just be copied directly into the component's CSS and HTML files. At this point, you don't need to change anything in the components typescript. Step 2, retrieve asynchronous data. We need to load some data from Firebase in order to make use of the spinner. In this example, I'm loading a Firebase list observable via the AngularFire 2 package. The actual data is just an array of items from a to do list. This code was originally created for the real time database video, so check out it if you wanna learn more about asynchronous data streams from Firebase. Step 3, show and hide the spinner. We want to show the spinner in the item's list component when the data is being retrieved. 1st, we define a variable called show spinner in the component and set it to true by default. During the n g on a net life cycle hook, the data is requested from the service as the Firebase list observable. We can determine if the data has been loaded by subscribing to it. The function inside the subscribe call will executed after the observable emits some data. So we can simply set the show spinner variable to false once this happens. In the template, we can use the n g if directive with the show spinner variable to control the visibility of the the spinner component itself. Going back to the app, we can see the spinner is visible for a split second before the data is loaded. The longer it takes for your data to load, the more useful the spinner is going to be for your end users. That's it for loading spinners. See you next time.
The speaker explains how to display and hide a loading spinner when retrieving asynchronous Isabel data from an Angular application. They provide step 1, creating a spinner component, and step 2, retrieving data from ante. The speaker explains how to set the show spinner variable and how to control visibility for the spinner component. They conclude by discussing how to load a split second before the data is loaded and how to use the spinner for end-users.