YOUR Apps NEED This | How to use Quasar Skeleton Component | Vuejs Quasar Framework Skeleton Screens

are you tired of looking at the same black pages whenever your application is loading well i've got just the thing for you let's go [Applause] so as we mentioned earlier skeleton right so you might ask what is a skeleton well basically acute skeleton which is based on caesar's definition is a component for displaying a placeholder preview of your content before you load the actual page data so in other terms it is a way of displaying visual elements while the data is still loading so it's a nice way of informing the user what to expect from the page before it is fully loaded and increases the perceived performance so in other terms you can imagine that your data is loading right so while it is loading it's either one of two things either either there is a loading state or there is none in the case of there is a loading state it's either a spinning thing or any indicator that is load it's loading right so on the other hand you may have a just let's say a blank white page so in this case skeleton solves two things first it adds information to your screen meaning you you see a perceived possible render of our admin you receive a possible rendition of data and at the same time your let's say your front end is responsive as well so to put things into perspective if you take a look at krazer's example right here imagine that your data looks something like this right so let's say you have a what do you call this a card so let's say a cue card that has let's say an avatar some certain text and a button that does things right so for example here you can see the card you can see here as well the textual content you can see a placeholder let's see an image right here or any content right here and then you have two action buttons so while the data is still loading the user can expect that something akin to this is what they're going to see so it gives your users a preconceived notion of what they will expect from the data itself so you might ask why is this important actually it is important in a sense that while your data is still busy or rather while your backend is still busy fetching the data for you you will give the users a what you call this a an advanced idea of what they will get when the data is finally fetched so aside from that also your application has increased performance per se meaning that yours what you call this your application is still responsive regardless of whether the data comes back or not so in this case it's either two things either your data has already been sent or is still being sent or rather the data is already sent but it has errors or something and the data is still not yet sent so either way you have something to display to the user while the data is still being fetched right so that's the important part of a skeleton which is what we're going to use this time so how do you implement one so let's try implementing this basic uh implementation of quasar so first what we need is a card right so going back to our application here so you can see that we have our application right here so if we go back to our code here's our application right so it's kind of messy but please do bear with me okay so now that we have this uh the next uh what we rather what we're going to do first is we're going to create our own skeleton so what we need is a div right so let's start with a div first i apologize so div right next we need a card so the card of ours is going to contain the skeleton itself so let's add it some let's say let's set some max width so let's style it with max v let's say 350 pixels you know to set the particles to set the size and then next we're going to add a item so we have an item right so queue item next we're going to add an item section they're just your typical queue item but notice no notice this and this is the important part we add an item section which is an avatar slot right so now that we have an avatar slot what we're going to do is we're going to add now the skeleton so let's add the q skeleton and then we're going to select a type of skeleton which is we're going to use the q avatar skeleton now notice notice notice notice this difference we added an item section right the thing is we added an item section where in the content of the item section is a skeleton so if you take a look at our card here you can see that we have now an avatar skeleton so now that we have an avatar skeleton next we're going to add another item section and then we're going to add textual skeleton to it so let's add another item section so let's say cue item section and then that's now that we have that one we need to add a queue item label so let's say something like that so we have an item label right and then let's get let's say let's add another item label let's say this time it's a caption so we have a caption right so here in the first item label what we're going to add is a q skeleton with a type of text meaning it's a textual skeleton meaning so it's you can imagine that it's going to display a bar that signifies that it's a text so that's what we're going to do as well with the other one so let's just grab this one and then let's append it over here so now you can expect that our avatar contains two lines of text right beside it so if you take a look at this one as you can see we have this right so the differ let's see the page is getting a bit cluttered maybe let's declutter for now let's see let's remove these items for now there's way too much let's say maybe up to here there you go now that we now at least we have more space something like this yes okay so okay let's see okay so let's add some padding now it's much better okay so let's say let's add some 500 pixels okay let's see oh okay let's remove the flex first there you go that's what i was talking about so as you can see now we have an avatar right where it has a textual content right beside it you will notice also the difference in size you see this top bar represents that it's a title and the text below is a caption so now that we have these two elements what we need now is another skeleton meaning it signifies that our content has a bigger item below it so let's let's add a q skeleton here and then let's set this one with a height of let's say 200 pixels more or less and then let's set it to square now what's it what it's going to do is it's going to create a square with a height of 200 pixels and it's going to take up the entire container so as you can see now we have a skeleton here so the users now have a let's what you call this a short preview of what the data might look like when it comes back or when it is properly fetched this time so they can imagine that there's going to be a picture here of some sort and there's textual content here and then there's a whole bunch of rather there's a huge chunk of content right here so that's what they are going to expect next this time we're going to add uh what do you call this the cue card actions so let's add let's add the cue card actions this time so cue card actions right so once that once we have that already uh this time let's align it to to the right okay so now that it's aligned to the right we can add now q skeletons so it's time to add another skeleton but this time we're going to add a button so as you can see we added a cue button skeleton to signify that we're going to create a skeleton based on the cue button look and feel so once we do that what's going to happen is we're going to have two buttons here right so there's uh what do you call this there's uh they are two connected to each other so let's add a gutter let's say cube gutter md so let's add a medium gutter in between the two so as you can see now the users can visualize what they're going to see when the data comes back so they have an avatar here there's textual content here and then a caption here and they have a big content here probably an image or video or any type of content you wish to display and then lastly there are two action buttons below them so that is how you create a skeleton of your application using quasars skeleton component so now that we have our basic skeleton let's now define what type of skeletons we can create for quasar so in the predefined types here you can see that they have a text right so you have a text which looks like this a line of or a what we call is a bar you have a rectangle here which is a bigger box you also have a circle which is rounded something like this you also have a q button which is this one akin or rather it looks like a cube button itself you also have cue badge chip and you have two bars you have checkbox as well toggle you have slider range avatar and key input so as you can see they have they have skeleton types which are based off of crazar's components themselves so next you have animations so as you can see they are there are several animations that you can use in your skeleton component so you have the simple wave where in you have a bright light passing through your skeleton you have pulse which allows your skeleton to act like it's pulsating you have pulse x where in it pulsates to the x-axis only and you have pulse y where it were in it pulses to the y-axis you also have fade wherein it looks like it's fading directly you also have blink and last leaders none so in case you don't want to add what you call this in case you don't want to add animations you have none so you might ask how do you implement an animation well the i the thing is you simply add an animation by adding the animation property so if if we implement that in our component let's say let's use the let's try the what do you call this okay let's try the pulse looks kind of appealing so let's use the pulse so let's grab this one and then we paste it here paste this one and paste it there so let's just add these animations for this and then you'll see that they are pulsating right that is how you use animations for your skeleton components as you can see our square here has stayed the same so by default it's using the wave so we did not apply any and we did not apply any animations to it so it's going to use the same thing that it has been doing by default which is the wave so aside from animations we can also set the size of these components like what we did with the squad the skeleton right the this uh this skeleton right here what we did was we set the size for this one so in order to set the size you need to simply add the width and the height property so you can set them to custom sizes based on your preferences so in these examples you see that they use different sizes they add a combination of width and height they also use with alone hype alone and then they also use the size meaning they're going to use the x and y respectively so you can set custom sizes based on your components needs and lastly you also have styling so for the styling you can add borders to your components by simply adding the bordered property so once you add that it's going to have this nice looking border around your component so if you take a look at this one it's pulsating right but it doesn't have any borders let's say this avatar right here so let's add a border for that one let's say something like that now you're going to notice that it has a border around the component now so that's what the border property does aside from that you will also notice that the corners are rounded so they are smooth right so you have these rounded smooth corners but in case you don't want that kind of feature you can simply add the squared property or rather the square so by adding the let's say let's use this one let's add the square what's going to happen is the rounded corners are going to disappear so they're going to look flat like this one so they have uh what do you call this they have perfectly corn or they have perfect corners rather than rounded corners so that is what the square property does in case that is what you wish for also you can add custom colors to your components so in this case you simply need to add a class which is the background class so let's say let's add a color to the avatar so for the avatar in case you want to add colors to it you simply need to add and then let's say choose a color in our case let's use steel so it's going to look like that and then let's say we want the buttons to look something legitimate or to tell us something unique so let's say let's add class here as well so let's say bg red to indicate that it's a wrong choice and then let's set the other button to bg green to indicate that it's a good choice so as you can see you can style your skeletons like this or you can set them the way they are by default which is the gray color right so it all depends on your usage and your specifications so it is based on what you need for these skeletons what these examples are showing you is that you can customize your skeletons based on your styling needs so it's not just a simple gray box looking thing or round looking thing but rather it is a customizable component that is able to cater to your needs whatever they may be so in this example you can see that they implemented a custom border as well meaning they created the class and bound it to that skeleton therefore applying the styles of that class to the skeleton itself so if you take a look at this one you will see some pre-made recipes to give you an example as to how it works so in this example they created a scaffolding or they created a what they call this a placeholder content for youtube video they also have a facebook for this one and they have twitter as well so you have twitch too and then here you can see that they created a table as well you also have lists here so based on what they are saying as well so your imagination is the only limit indeed for quasars skeleton component so in a sense using uh using quasar skeleton you can create your own components or your own skeletons based on your ui design so one way to implement this is to first create the actual data or the actual component to be rendered and once you're done rendering that you can convert that to its skeleton equivalent to make things more consistent so that is one way of applying this skeleton in a real life scenario so for those of you who let's say um want to implement this uh first one tip that you can use is to first create the actual data or render your actual data and then later on create a skeleton based on that actual data that you're displaying that way your ui is going to look consistent while it is loading and after it has loaded thank you guys for watching this video i hope you have learned something from this tutorial if you see that this video has been useful for you please don't forget to leave a like as well as to hit that subscribe button to get notified of our latest updates and when new tutorial videos gets loaded again this is joshua from pixelate see you later pixelators

Channel: Pixel8 Academy

Views: 346

Keywords: vuejs, quasar framework, quasar framework skeleton, quasar skeleton component, quasar loading screen, skeleton screens, quasar skeleton screen tutorial, quasar framework tutorial, quasar framework component, vuejs skeleton screen, vuejs skeleton loading screen, vue skeleton screen, frontend developer guide 2021, frontend development, vuejs tutorial, quasar tutorial, skeleton screen tutorial, 2021 quasar framework, skeleton component, skeleton screen, user retention

Id: atkK6rP4W8A

Length: 19min 52sec (1192 seconds)

Published: Thu Sep 23 2021