Ionic 4: todo App + firebase

14 Loading Controller Building Mobile Apps with Ionic 4 Vide

in this lesson we are going to learn how we can use loading controller in ionic loading controllers are used in ionic to display a loading spinner to the user

when the application is busy doing something in the background so it tells your user to wait for a background process to complete and once that background process is

complete the loading spinner can be dismissed so in this lesson we are going to learn how we can use loading spinners in ionic and while we do that we will also learn how we can write asynchronous

code in ionic a loading controller is an overlay component which means that it is displayed on top of another component on our page and it blocks user interaction so while the loading controller is being

displayed to the user the user will not be able to interact with the rest of your application when the loading controller is dismissed only then the user can resume interacting with the

application so now that we know what is loading controller let's learn how we can use it in ionic to display this overlay component to the user so here I am back inside visual studio code and I

have cleared out everything inside the iron content to use a loading controller you have to write the code inside your typescript file you cannot use loading controller from within your HTML file

however to display the loading controller we will need an event so the user will have to click on a button or something should happen in response to which we will display the loading

controller so let's go ahead and create a button and then we will click on that button we will invoke a function and inside that function we will write the code to display the loading controller

to the user for 5 seconds and after 5 seconds we will dismiss that loading controller so let's go ahead and create a button first and there we have our button I'll bring

back the padding attribute on iron content because the button is touching the edges of the screen next on the click of this button I want to execute a function so I'll bind the click event of

this button to a function and let's call this function as show loading and the next thing that we'll have to do is create this function inside the home dot page dot ts file so go ahead and open up

your home dot page dot TS file and in here inside the home page class you need to create this function to create a function in typescript all you have to do is just type in the name of the

function followed by the list of parameters within a pair of parentheses and then within the braces you define the body of the function to use the loading controller the first step would

be to import loading controller from a package called advi– onic slash angular once you have imported the loading controller successfully inside the class you need to create a constructor the

constructor is required because you want to inject the loading controller inside your homepage class to create a constructor all you have to do is type in the constructor keyword followed by a

pair of parentheses followed by a pair of braces and this is exactly how you just created the function show loading so now that you have created the constructor the next step would be to

inject loading controller inside your constructor so within the pair of parentheses for your constructor you need to go ahead and type in private then choose a name for your loading

controller instance I like to use loading ctrl where ctrl stands for controller then put in a colon and after the colon you can just go ahead and type in loading controller which means that

loading controller is the type and the name of the object or the instance here is loading ctrl now inside my show loading function I can go ahead and write the code to display the loading

controller to the user using the loading ctrl object so here I can just go ahead and type in they start loading ctrl dot create and inside the create function you can go ahead and pass in a JSON

object that defines how the loading controller will look like so the first property inside the JSON object will be message which actually contains the text that will be displayed on your loading

controller and for now we are just going to pass in the text loading to the message property and the create function returns a promise and therefore you can execute the den function on the return

value of the create function so inside the subsist callback will get a parameter let's call it loading and inside this promise we can just go ahead and type in the present function on the

loading object this will present this loading controller to the user let's go ahead and test this out in the browser so I'll just go ahead and click on this button

and you can see that as I click I get this loading overlay component in my application and now if I click anywhere on the screen nothing happens and that's because I cannot interact with the

application unless this loading controller has been dismissed and to dismiss this loading controller you can simply go ahead and call the loading dot dismiss function so let's go

ahead and write a timer function here so I'll use the JavaScript function set timeout and I'll set the timer to 500 milliseconds which will be equal to five seconds and in here

I'll call loading or dismiss which will automatically dismiss the loading controller after five seconds so let's test this out again in the browser I'll click on the button and the loading

controller shows up and after five seconds it is dismissed automatically and we have written this code using promises the then function here is a promise which is executed only

when the controller is ready to be presented to the user another way of writing this asynchronous code is using a wait an async solid squared and refactor this code to use a weight and

async and make this code more readable the first thing I'll do is store the return value of the create function inside a variable so let's call this variable as loading and since the create

function returns a promise I can use a weight here to unwrap this promise so the value that was previously returned to us inside the promise will now be available to us as the return value and

will be stored inside this loading object that we have just created so now we can go ahead and get rid of all this code here and we are getting this error because we cannot use a weight inside a

synchronous function to use of it inside the show loading function we will have to make sure loading an asynchronous function and to do that all we have to do is just type in async before the name

of the function and now you can see that the error goes away next now that we have got a reference to the created controller inside the loading object we can use loading dot present and to

dismiss the loading controller we'll use the same set timeout function so we'll dismiss it using the loading door dismiss function after 5 seconds and now our code is refactored and is much more

readable because it uses async and await instead of promises the await keyword here makes sure that unless the create function returns a value the execution will not proceed any further

and once the create function returns the value it is stored inside the loading object and in the next step it calls the present function on the loading object so the execution only proceeds further

once the create function returns so now let's go ahead and test it out in the browser I'll click on the button and the loading controller shows up and after five seconds it is automatically

dismissed before concluding this video let's have a look at some of the properties that we can pass in the JSON object inside the create function to configure how the loading controller

looks like so along with the message property we can also pass in adoration which takes in the number of milliseconds after which this loading controller is

automatically dismissed so if you are using duration you will not be using the set timeout function along with duration you can also pass in a boolean value for show back drop and if you set it to

false the back drop which is a darker background will not be visible when the loading controller is displayed the last property here is spinner and there are a few values that you can pass in to the

spinner parameter for now let's go ahead and type in line 0 and let's see how the loading controller looks like I'll click on the button and the loading controller looks as it was looking before let's

change the spinner value to lines – small and now if I click on the button you can see that the spinner is much smaller in size other parameters that you can pass in to the spinner property

are dots bubbles circles and Crescent and all these values that you pass to the spinner parameter will give you a different spinner animation feel free to try them out and play around with the

loading controller so now that we know how we can use loading controller to display a loading overlay component to the user in the next video we'll learn how we can use toast controller in ionic