Loading State Component

[00:00:00]
>> Maximiliano Firtman: Going back to our code. Now, if you are following the instructions in the Readme file, I'm going to work with default. It says animated loading. This is actually not really a requirement, but something that is really nice mostly when we are loading asynchronous data. Remember every time we are going to the server that might take time.

[00:00:24]
Okay, right now, our app is pretty fast, even if you're using a cloud based database. Okay, so it's pretty fast. But anyway, of course, that might take time. I mean, the database might be slow, or maybe we are in a very slow connection, so it might take time.

[00:00:39]
The usual classic pattern was actually to create a loading spinner or a loading progress bar, but that's actually really bad these days. I mean, without getting into details on that, but briefly, when you create a spinner Or a pro a progress bar, you're actually setting yourself a label saying, I'm slow, okay.

[00:01:06]
That's kind of the idea, I mean in short words, it's like, I'm slow so I need to put this. So instead of doing that the new pattern that we are using in apps, it's actually to create Wavy animation, probably you have seen that. It's like we set some placeholder for the content.

[00:01:24]
The content is not there yet, but we send some placeholders that are kind of waving with an animation, okay? Something like that. And we can do that pretty easily with just creating a web component and some CSS, okay? Of course the CSS is already there. You can go and check it.

[00:01:41]
It's actually a class loading wave. So if you open in public styles dot CSS, you can search for loading wave.
>> Maximiliano Firtman: And it's actually it has, it's for any block based elements, so it has a size and A background, and also it has an animation. The animation is using CSS animation, and this is making actually that way.

[00:02:06]
It's moving the background. It's actually using for the background. It's using a gradient as a background, and then it's like moving the background. And because it's moving the background, it's like, that gradient is moving, it's being animated. So it's creates that wave effect without, without any any external files or SVG.

[00:02:25]
It's just pure CSS. So we're going to create that component so then later we can use it at some places where we want to set that while the data is loading. So for that, I will create another component. Right now we have homepage and movie item. Remember, movie item is each movie that we are rendering.

[00:02:44]
So in this case, I'm going to create animated loading js, loading js, and it's going to be a web component. So that means that we know what do we need to do when we are creating a web component, we are creating a class. Always loading extending from HTML element.

[00:03:04]
By the way, you don't need to always extend from HTML element. It can also be a subclass of HTML element. It can be a custom class of your own, or there are other elements, for example, audio element or button element. So you can extend. One of the HTML elements and start from there instead of starting from an empty placeholder.

[00:03:27]
Okay, but for now, I think that HTML element will do the trick, and remember that if you want to use this, you also need to register it with the custom elements API. So we're going to define a tag, an HTML tag, a new tile, for example, animated loading, and then we set our class as the one that's going to render that particular element.

[00:03:53]
And in this case, we are going to implement the connected callback. Remember, this is a standard method that we can override from the super class and do something here. Okay, what's my idea for this particular web component? So let's move to index html, just to see how I want to use this.

[00:04:16]
Okay, so let's see anywhere in our page, for example, here in the main. While it's loading, I want to use my animator loading element actually with G, like that. But also, maybe let's say I want different boxes, I want five boxes. Instead of just adding five of those.

[00:04:39]
Maybe we can just have a property, a custom attribute where actually I can say how many elements do I want, like I want five. To make this, we can do that with web components. The only requirement to make it fully compatible and fully spec compatible is to use data dash attributes.

[00:05:08]
Okay, so our custom attributes should have a prefix of data dash that. There are several reasons for that, but one of the reason is for future compatibility with. Build with HTML, because maybe in the future, HTML might add an element attribute in the spec, and now we are using it for our own purpose, so we will have a problem.

[00:05:32]
So if we prefix those attributes with data, dash, okay, we know that for sure that won't be a problem in the future. And also we may wanna set here, maybe the width and the height. We can use also this. Like, for example, I want this to be 300 pixels and we can add CSS.

[00:05:58]
We can change that later. So, yes, Is the data dash, is that like a requirement or is that just a best practice? So it's something in the middle actually. So if you don't use data dash, it will work and you can use it, okay. You are not following best practices, but also you are breaking Key the rules.

[00:06:21]
But anyway, on HTML, you can break the rules and nothing happens, okay? So also, the way that we use now to get the values is different. If it's a normal attribute, even if it doesn't exist, or if it's a data dash attribute, actually data dash attributes, they have an AP API.

[00:06:40]
So now, we will use that. So this is from an HTML point of view. So from the UI, this is how we are going to use our web component. Okay, so now I will show you what's the difference. So if I have another one, let's say a test that is not data dash with something inside.

[00:06:56]
Now, we'll show you how to read that from JavaScript. Script, but you will see it's different from data dash attributes. So if you're coming from React or Angular, yeah, that data dash looks like a lot of work or bureaucracy that we need to add. But the reason is, first, future compatibility, and also there is a Bucha script.

[00:07:20]
Anil API available for us to work with data dash attributes or properties. So from the web component, so from here, for example, I might.So let's talk about the constructor for a second. If you override the constructor, you must call super. Per If not, it's not going to work.

[00:07:42]
So remember that. So it's important to understand these two moments, the constructor and the connected callback. If I want to read the properties in the HTML tag, I must use connected callback. Why? Because the constructor is the first thing. That it's being executed when an object of that class is being created, and that moment, the system, the engine didn't parse yet the attributes.

[00:08:11]
It's just creating the classic memory, okay? So don't use the constructor for reading properties. So we can use Connected callbacks. If we want to get, for example, the amount of elements that we have or the width of the high, we use this.dataset. Every data-attribute goes to a property of that object dataset without data dash.

[00:08:41]
So, for example, I will have directly, .elements. This is actually data elements, okay? So if I want the width, it's this data set width. And, of course, the same for height. You got the idea.
>> Maximiliano Firtman: Now, For the test attribute, I need to actually use a different API.

[00:09:07]
It's not going to dataset. We can just say this.test and hold for the best because that depends on the browser implementation. What happens when they have an attribute that is not really recognized? Or if you want something that we work everywhere, you need to call, get attribute and then read that attributes value with a key, okay, so if you don't use data dash, you need to, like, go back to that old way to read attribute, even if they're not official attributes.

[00:09:40]
Okay so data set is better because it goes automatically to an object, and you will get all your properties, your custom properties there. This is similar to input properties in Angular or props in React. And here I just need to loop through the elements and I need to create a.

[00:10:01]
Are as many elements as you are requesting, and then I'm going to create divs, and I'm going to apply the class to those divs, okay. So I will say, let's call this wrapper. I'm going to create the div.
>> Maximiliano Firtman: To set the class there are many ways you can set the attribute.

[00:10:27]
You can change the class name. There are many ways to do that. You can set the attribute. You can change the class name, or you can use class list. There is an API where you can add a. A class or remove a class to that particular element, classification to that element.

[00:10:46]
There are many ways to just apply the same thing and I'm going to apply loading wave. That's then CSS is applying an animation there. Okay. Does it make sense then? I should maybe use my width and height. So I will change the CSS from Javascript. You can change the CSS using the style property.

[00:11:13]
So I have the width, the height.
>> Maximiliano Firtman: This is Height. And from here, I can also set, or I can change that from CSS as well, but I can change the margin maybe. And we can maybe change this to inline block. I'm not sure if you, does anyone know the difference between display block and display inline block?

[00:11:41]
In CSS? In block takes the whole width. Uh-huh, And the other one doesn't. So a block, yeah, it's taking the whole available width and the parent, that doesn't mean it's the whole width that we have on the screen. It's inspiring element, inline makes it not a box, but something that shares the space with other elements.

[00:12:06]
And inline block, it's actually inline, so it's like letters. I mean two letters, they are inline, so they are one after the other. They're sharing the block. But applying block means that I can use block based properties such as marching padding border that they're not for inline on the elements.

[00:12:29]
Okay? And finally, I need to add this wrapper to myself. Remember, we are a component, so we are adding that wrapper So this is just a quick exercise, okay, to quickly see how to create a web component for real usage that then we can reuse as many times as we want.

[00:12:51]
>> Student: I think do you want the append child inside of the loop?
>> Maximiliano Firtman: Yeah, you're right. Thank you. I need this Pen child inside the loop, because we are creating different elements. Yep. Thank you.
>> Maximiliano Firtman: So now we can try this. Will it work? What do you think?

[00:13:13]
First, let's remember where I'm using it. I'm using it in the main. Okay. Which I don't know if it's going to work or not. What happens with what we have here. If I refresh, I'm not saying this, but there are a couple of reasons of why we are not saying this.

[00:13:37]
Let's go back and see Who is rendering the home page. Remember that this is a home page. At some point someone is actually loading the home page and actually is here. Okay, so it's adding this. It's appending the child home page. That's something that we will change in a few minutes.

[00:13:59]
But it has a homepage there. If we look at the DOM, we look at main, okay? We do have main and we do have animated loading. It's there with all the data properties, but actually has no rendering. Does anyone know why? Yeah, they had this problem before. For the browser to recognize our web components, we must import the file.

[00:14:29]
If it's not in the Import tree, the browser will never know that I do have a file. Okay, so I need to import this in. In this case, it's going to be components, forward slash, animator, loading, js. So now if I refresh, something happens, okay, it's actually saying, hey, relative references must start with either forward slash, dot, forward slash.

[00:15:00]
Slash, which is true, be careful when you're doing this, because, mostly, if you're used to some bundlers, JavaScript bundlers, they solve those issues. In browser based JavaScript, you have to start your imports, the path of the file you're importing, with a forward slash or with a dot. So it's mandatory.

[00:15:23]
Look at that. Now I have five loading animations. And of course, we can change properties. Let's say maybe I want 200, 500. Of course, you can play with that until you are happy with that. You can make them smaller, or maybe 200 and 400, something like that. Okay?

[00:15:51]
It's up to you. And also, you can use these for very small lines to simulate text. Just a to do for later. Okay, for you, maybe homework for you to have in mind. So a warning, what happens if you change this purpose, these properties manually, like from JavaScript, or even from here?

[00:16:16]
So I'm going to here, and I'm changing that file and then now I'm saying I want three. It is not changing it, or I wanna change this. It's not updating the ui. Okay? Makes sense. That is because we have already rendered our work component, the lifecycle of the web component is more complex and actually connector callback.

[00:16:41]
And actually connected callback is executed only when you put that in the DOM, and that's all. So you need to remove it from the DOM and put it again to actually execute that code again. So there are other methods available in a web component, and one is being executed.

[00:16:59]
Some of the attributes are changing. So in that case, you can re-render or you can update the UI when that happens. Okay, maybe in this particular example, as we are because it's just for animation. So once you design it, probably you're not gonna change it, but when you're creating other web components have in mind that if attributes are changing dynamically after the element is injected in the dome, you need to detect that through a method.

[00:17:30]
Okay, so now I'm going to delete that because we will use this animated loading later, okay. On different parts of the app, we may use that Web web component, so that was just for testing purposes.