React Skeleton Screen Tutorial #3 - Base Skeleton Component

Key Takeaways

all right then gang so now we've successfully grabbed all of that data what i'd like to do instead of showing this loading text is work on the skeleton components so we can show those different skeleton layouts instead now the way we're going to approach this is to make a reusable base skeleton element component and that can be configurable to be different shapes so that we could have for example a skeleton text to be a strip going across or a skeleton title which might be a bit thicker or a skeleton avatar which could be a circle or a skeleton thumbnail which could be a square where a thumbnail might go all of that kind of stuff i just want to create one single customizable component which could be any of those and then we could reuse that to create different skeleton layouts to create maybe a skeleton articulator or a skeleton profile and different things all right so it makes it really reusable so then what i'm going to do is come over to the source folder and create a new folder called skeletons this is where all of our skeleton components and skeleton css is going to live and then inside there i'm going to create a new file called skeleton elements dot js so this is going to be the base skeleton element component that will be reusable and customizable so all i'm going to do is first of all import react from react and then after that i'm going to create a functional component so i'm going to say const skeleton elements is equal to a function and inside here will return a simple template and that template is just going to be a div with a class name equal to something now we'll come back to that class name in a second and then close off the div now at the end i just want to export this so export default and then skeleton element okay so now this class right here will ultimately be the thing that determines what shape this skeleton element is going to be and we're going to be able to pass that in so we'll get it on the props that come in from when we use this so if i was to use this skeleton element inside the articles component i could pass in a prop to say what type of skeleton element i want is it going to be a title or some basic text or an avatar or a thumbnail etc so we can destructure that up here from props and we'll call it type and spell it correctly and then what we want to do down here is make up these classes based on the type that we pass in so i want this div to have a class of skeleton regardless so i could say down here skeleton but i also want it to have the class which we're passing right here now that could be avatar it could be thumbnail it could be text it could be title etc so what i'm going to do is create a constant right here called classes right and set that equal to a template string meaning we can output a variable inside here now i want one of the classes to be skeleton which we added down here right and the other class to be the type so now i can just output the type in the curly braces like so and now we have a classes string and instead of outputting this right here i can just say that this is equal to classes right so whatever this is here so now what i'd like to do is style the different types that we can pass in so i'm going to come to the skeletons folder and create a new file and call this skeleton.css and i just want to apply some basic styles to the different types of skeletons we can have so the different classes and also this class right here i want to style that as well so let me come over here and do a comment that says basic styles and then below that i'm going to grab the skeleton clasp first of all which is going to be present on every div right here and we're going to say for that we want a background of ddd which is a kind of light gray color and then the margin is going to be 10 pixels top and bottom and 0 left and right so if we have multiple different skeleton elements there's going to be a vertical margin between them the border radius is going to be about four pixels just to soften up the corners and then i want to also style the different types so i'm gonna say dot skeleton again and then if it has a class of text as well then we're gonna style it in a particular way so say for example i pass in the type to be text then it's going to get a class of text as well as skeleton so we're styling that up now and in this case we want the width to be 100 of whatever parent we pass this component into and the height is going to be 12 pixels so this means it's going to be a thin strip which is going to be colored light gray and that will represent a line of text right now i'm going to do another one which will be skeleton dot title so this is another type we could pass through this is going to be similar to text but it's not going to be as long the width of this will be 50 of whatever parent element we place in and then the height is going to be a little larger so it's a bit chunkier much as title text sometimes is it's going to be 20 pixels instead of 12 and then we're going to give it a slightly larger margin bottom so margin bottom is going to be 15 pixels instead of the default 10. all right okay so there are two different types we can pass in let's also do another one so skeleton dots avatar and this is going to be like a circle you know when we get a profile sometimes we get like a little avatar which is a circle image that's going to represent this so width is going to be 100 pixels the height is going to be 100 pixels and then the border radius is going to be 50 and with a border radius of 50 a square is turned into a circle right it rounds it at each corner such that it becomes a circle so that's the avatar and then finally i'll just do a square so skeleton dot thumbnail we'll call this and that will have a width of 100 pixels and a height of 100 pixels so the same as the avatar but square so we don't have to border radius okay so they're the different types that we can pass in which become classes inside this skeleton element component right so what i'm going to do is try out putting this skeleton component inside the articles over here and we'll pass in a different type each time so we can see what they look like so i'm not going to output them here or in the loading screen for now what i'm going to do is just output them at the top underneath where it says articles so we want the skeleton elements and if we hit enter it's going to import that for us at the top and then we want to pass through a type so let's say the type is equal to title for example i remember these types match up the classes we just created so if i save this and preview then refresh over here we don't see that so let's see what's going on and i think the reason this isn't working is because i've not actually imported this css anywhere we need to import this css into this file right here so that the skeleton element can use it so we're going to import and we want dot forward slash for the same directory skeleton dot css like so okay so now this should work yep now we see it so that is a title skeleton element now let's just go back to articles and duplicate this a few times and pass in the different types that we have so we had title we also had text we also had thumbnail and we also had avatar so if i save this we should see all types okay there's the title top the text which is longer and thinner the thumbnail which is kind of like a square and then the avatar which is a circle awesome now that looks pretty pants as is there and i wouldn't just place this as they are down here while this loads because it doesn't really look like anything except a random bunch of shapes so what we're going to do is create more components which uses these base components right here to create different skeleton layouts and then basically we can create as many different types of skeleton layouts using these base skeleton components or this one single base skeleton components with different types right here so we're going to start that process in the next video by creating a skeleton article component