Hey guys, I am Venkat and this is Part 7 of "Web development with Blazor" video series.
I'll include the link to the course playlist in the description box below this video.
So, here is what we want to be able to do, display a loading animation in a Blazor web application.
In a real world, there are many use cases where we need a loading spinner or indicator. For example,
your app is processing a report and it takes a few seconds to complete or a server-side REST
API is being called and it's taking a few seconds to retrieve data maybe because of a slow network
connection, server busy or just because you're retrieving lots and lots of data, whatever may
be the case, if your app is taking a bit of time to do something, it's better to display a loading
indicator, so the end user knows, the application is busy processing the request and not frozen. You
can see the loading spinner in action. On the home page our app is retrieving data from a server-side
REST API, because we have a few seconds delay in retrieving data we see the loading spinner,
as soon as the data becomes available, the loading animation disappears and we see the data.
We're going to use Syncfusion spinner component to get the loading animation effect. It's very
simple and easy to use. Let's take a look at the steps. Notice, at the moment when
we navigate to the "home" page, we see employee data immediately without any delay, that's because
in our "Employees" database table, we only have four rows and for the REST API to return these
four rows, it doesn't really take that long, so let's introduce some artificial latency,
and we already know it is this "index" razor component that displays the list of employees,
and we have the call to our REST API right here. So, before the REST API returns employee data,
let's introduce some artificial latency, and for that, I'm going to use "Task.Delay()"
and we specify the delay in milliseconds, 3000 milliseconds that is three seconds.
Notice, first the table header appears and after three seconds employee data appears. So,
here's what we want to do, while we are waiting for employee data, we want to display the
loading spinner. Our first step is to install this spinner nuget package "Syncfusion.Blazor.Spinner".
Now, take a look at this "index" razor page, on this page we are using Syncfusion grid component,
so if we take a look at "Packages" under "Dependencies", notice the Syncfusion blazor
grid nuget package is already installed and this package has a dependency on the "Spinner" package
"Syncfusion.Blazor.Spinner". Since this package is already installed, we don't have to install it
separately again. Next, let's open "index.html" file and this file is present in this folder
"wwwroot". Reference Syncfusion Bootstrap 4 theme file, the styles in this file are required for
both Syncfusion grid and spinner components. Next, let's open this "imports.razor" file. Just like
how we have a "using" declaration for Syncfusion Grid component, we need a "using" declaration
for Syncfusion Spinner component. Next, in "program.cs" file we have "Main" method and
in this method we need to add Syncfusion Blazor services. In our case the required services are
already added when we added the Syncfusion Grid component. So, all that is left right now to do
is, use the spinner component in any of our application pages, in our case we want to add
it on this "index" razor page and notice, this syncfusion grid component is binding
to "Employees" property and we're using the REST API to retrieve employees data and this is what is
taking at least three seconds because we have introduced some artificial latency here. So,
let's check if this "Employees" property is null, if the "Employees" property is null, that means we
have not yet retrieved the data, so we want to display the Spinner, so let's do a NULL check.
If "Employees" property is null, we want to display the spinner component. We still
see a red squiggly, that's because we have not saved "imports.razor", the moment we save it,
that red squiggly should be gone. "SF" by the way stands for Sync Fusion, Syncfusion Spinner.
We have turned on the visibility. So, if "Employees" is null then display the spinner else
display the Syncfusion grid component with a list of employees.
Notice, while we are waiting for data, we see the "Spinner" component, as soon as the data becomes
available, the spinner component disappears and we see the grid with a list of four employees.
Now, let me set "Label" property and we can set it to any string we want. I'm going to set it
to "Loading Data". With this in place, notice along with the spinner we see the text as well.
We can also specify the size for the spinner, for that we use the "Size" property. Let me
actually set it to 50 pixels. By default, the spinner size is 30 pixels but obviously
we can increase or decrease it depending on our application requirements. We can also specify
spinner "Type". By default, the "Type" is "None", where the Blazor spinner is loaded based on the
theme used in the application. You can see the available types on the screen. In this application
we are using "Bootstrap 4" theme. So, let me explicitly set "Spinner Type" to "Bootstrap 4".
We can also change the spinner color, for that include this style.
Keep in mind, we're using Bootstrap 4 theme and I'm changing the color to "Red". Notice, now the
spinner is slightly bigger and its color is also red. If you're wondering how do I know, I have to
include this style to change the spinner color? Well, the answer is Syncfusion documentation.
For example, to get the spinner component documentation,
navigate to their website "Syncfusion.com" then click on "Products > Blazor". On this page,
search for "Spinner", click on it, on this page, search for "documentation", click this button.
If you're getting started with the blazor spinner component then use the documentation on this
"Getting Started" page. If you want to customize the spinner, use this page. If you want to change
the style and appearance use this page. Remember, in our application, we are using Bootstrap 4
theme, so if we scroll down a bit, we have the style here for Bootstrap 4 theme to change the
spinner color. At the moment, we have hard coded spinner visibility to true, we can also bind it
to a "boolean" property in our component class. Let's see how to do that. First, let's create a
property in our component code. The property is of type "boolean", let's call the property
"SpinnerVisible". As soon as this async operation starts to retrieve our REST API data, we want to
set this "SpinnerVisible" property to "true". After it completes, let's set it to "false".
We can now use this "SpinnerVisible" property to control the visibility of the spinner.
Instead of using this "Visible" property, we're going to use
"bind-visible" property and bind it to our "SpinnerVisible" property. With this in place,
we no longer need this "if" check, we actually need it on the grid. So,
let me cut it and we don't need these brackets as well, so let's get rid of them.
If "Employees" not equal to null,
then display the grid. Now, the visibility of this pinner is controlled by this property.
Notice, even now the spinner works exactly the same as before.
That's it in this video. Thank you for listening.