Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Skeleton loading for stats #37

Open
Balastrong opened this issue Aug 22, 2023 · 5 comments
Open

Skeleton loading for stats #37

Balastrong opened this issue Aug 22, 2023 · 5 comments
Assignees
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@Balastrong
Copy link
Member

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)

@Balastrong Balastrong added enhancement New feature or request help wanted Extra attention is needed labels Aug 22, 2023
@pavelee
Copy link

pavelee commented Aug 22, 2023

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
Copy link

faiz-ansari-afk commented Aug 28, 2023

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
Copy link
Contributor

Can I have this issue? 😜

@Balastrong
Copy link
Member Author

Sure, go ahead @black-arm :)

@black-arm
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

4 participants