Loaders

๐Ÿ‘จโ€๐Ÿ’ผ Now that our routing is all taken care of, Kellie (your coworker ๐Ÿงโ€โ™‚๏ธ) has taken some time to make the app look a little bit nicer and now you need to add some data loading.
๐Ÿงโ€โ™‚๏ธ I've also created a temporary fake database for us to use until we get around to actually putting together a real database in the future. You can find it in the app/utils/db.server.ts file if you want to, but don't worry about it because Marty (the moneybag ๐Ÿ’ฐ) will give you all the code you need to work with it as it's not really necessary for what you're learning today.
๐Ÿงโ€โ™‚๏ธ I've also added a user with some notes in the database by default as well. The username is kody and I've added a link for Kody's notes on the home page in the top right corner to make it easier for you to get to his first note which can be found at .
The tool we're using is @mswjs/data which you may find useful in other contexts. But again, don't worry too much about it. We'll get to the real database stuff in another workshop.
๐Ÿ‘จโ€๐Ÿ’ผ Great, with that out of the way, it's time for us to actually start loading data. Based on what you learned in the background for this exercise, you should be familiar with the conventions necessary to load data into the UI and the emoji will be there to guide you along as you go. We're going to be loading data on the profile, list of notes, and note page.
๐Ÿจ All the instructions for this exercise will be in the files themselves. You can go through them in any order. They will be pretty similar to each other.
Don't forget you can use the "Files" menu below to open the files necessary for this workshop.
And if you really get stuck, you can always look at the diff tab to see what you're missing.

Access Denied

You must login or register for the workshop to view the diff.

Check out this video to see how the diff tab works.