React Skeleton Screen Tutorial #5 - Skeleton Profile

Key Takeaways

okay then gang so now we have the article skeletons kind of done let's also do a similar thing for the skeleton profile over here so we need to make that component i'm going to say new file inside skeletons and call this skeleton profile.js and then inside here we want to first of all import react and then we want to create another functional component so const and i'm going to call this skeleton profile set that equal to a function which is just going to return some jsx and inside here we want to again have the skeleton wrapper to go around it much like we did inside the skeleton article so let's do that we'll say div class name is equal to skeleton wrapper like so and then inside that div we want the skeleton profile so let's do another div with a class name this time equal to skeleton hyphen profile and then inside that what different elements do we want for the profile well i'd like a little circle on the left to denote some kind of avatar even though this one doesn't have it i'd still like to make a placeholder skeleton with a little avatar on the left so a circle then maybe a title then maybe two lines of text or something like that that might look like a profile so let's do that now the way i need to do this is by putting the avatar on the left and then the title and the text on the right and we'll be using css grid to create the styles for that but what it does mean is i need to surround my different skeleton elements into two sections two divs one div for the left and one div for the right so let's do that a div for the left and this is going to have a skeleton element whereby the type is equal to avatar that's the circle remember that we created and that auto imported skeleton element right here and that's the only thing we need on the left so let's do another div now for the rights and on the right let me just make sure this is correct on the right we want the title and two lines of text so skeleton element type is equal to title like so and let me duplicate that and change this to text and then have one more of these as well okay so that's all there is to that layout we have the circle on the left the title and the text on the right we also need to export this so export default skeleton profile all right and then we need to make the styles for this thing before we make the styles for them let's just output the skeleton profile in the user component so instead of this loading text right here we'll say skeleton profile hit enter to auto import it let's just check that import yep cool save this and preview and now we can see this is the profile skeleton now again we want to style this so the circle sits on the left and the text on the right so we'll use css grid to do that and because we have two elements right here this div and this div this will automatically sit on the left and this will automatically sit on the right so let's now come down here i'm going to do a comment to say skeleton profile so we know what this is and close that off and then underneath that skeleton hyphen profile and we want to say display this as grid we want to set up a grid template columns layout whereby the left is one fraction and the right is two fractions so the circle is going to be less in width than the text and then we also want a bit of a grid gap so we can say gap is 30 pixels and then we also want to align everything in the center before i do that let me save it and preview so if we take a look that looks good but i want to bring this down so it aligns in the center of the circle and we can do that by using the align hyphen items property when we're using css grid to say center and that vertically centralizes everything so if i refresh now we can see that it brings it down a touch and that looks pretty good again we will add animations and styles to this over the next couple of lessons so they do start to look better and we're going to start in the next video by adding a theme to each one of these so that they could be light or dark so we'll do that in the next video