Feature: add skeletons

[fishtriangle]

Add BaseSkeleton and ProductListItemSkeleton components Add to tailwind.config.js keyframes for skeleton animation Add to CategoryView.tsx skeletons while categories are loading Add to ProductListItemSkeleton.tsx skeletons while products are loading

[vercel[bot]]

Someone is attempting to deploy a commit to a Personal Account owned by @Loskir on Vercel.

@Loskir first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
price-monitor	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 4, 2023 at 10:24AM (UTC)

[Loskir]

😍

[Loskir]

Looks great! But you forgot to add product item skeletons to CategoryView

[Loskir]

And also add skeletons to ProductView?

[fishtriangle]

Made some corrections!

[Loskir]

Skeletons for categories are misaligned

[Loskir]

Nevermind, can't reproduce locally

[Loskir]

Thank you so much! I'll merge this and add some corrections after that.

Also it looks like you're using prettier. Please install dprint formatter and use it for future contributions. The formatter itself is installed as an npm module (it is already included in dev deps), you can also install a plugin for your IDE.

[fishtriangle]

Skeletons for categories are misaligned

Test for that problem - and several times caught it. Looks like it doesnt recognize tailwind width utility in array that is not used anywhere else. Thats why some skeleton blocks have width = 0. I dont know why it works so, but temporary solution maybe add <div className={"w-6/12 w-5/12 w-4/12 hidden"} /> before array mapping

[Loskir]

Yeah it's tricky to get dynamic tailwind values to work because tailwind does tree shaking for unused classes and doesn't know which classes are used. You should probably rewrite it using your own classes or just css-in-js using emotion

[fishtriangle]

ok, i'll do with my own classes

[Loskir]

Great, please open another pr