DevLeonardoCommunity / github-stats

Aggregating and displaying YOUR GitHub Stats in meaningful metrics (we learn web development in the meantime)
https://public-github-stats.vercel.app
MIT License
71 stars 36 forks source link

Skeleton loading for stats #37

Open Balastrong opened 1 year ago

Balastrong commented 1 year ago

Feature Description Display some skeleton cards while stats are loading in /stats

It should be implemented because... Improves the loading experience

Describe alternatives you've considered A boring spinner

Additional context Please do not start with the implementation immediately, let's discuss and decide here if we should do it from scratch or use an external library (if so, which one)

pavelee commented 1 year ago

Probably writing from scratch could be more fun. I could try do that, just isolated component to integrate lately.

As we speak about library I really like https://ant.design

Here their implementation of skeleton -> https://ant.design/components/skeleton (good example as "how should it work")

faiz-ansari-afk commented 1 year ago

We can leverage Tailwind CSS, which the project is already using, to craft skeleton cards. Moreover, seamlessly implementing dark mode using Tailwind CSS requires no extra effort.

Refer this Skeleton Card made with Tailwind CSS

black-arm commented 11 months ago

Can I have this issue? 😜

Balastrong commented 11 months ago

Sure, go ahead @black-arm :)

black-arm commented 10 months ago

image In the loading phase we have this result. We are using the react-loading-skeleton library. It is good but It doesn't change color when we move from light to dark theme. We can make it do better with tailwind css. What do you think? In this video I show you a prototype. https://github.com/Balastrong/github-stats/assets/68558867/95ec5e57-4caf-4a1e-be06-540c8fed4bde

@Balastrong @pavelee @luckyklyist