Skip to content
This repository has been archived by the owner on Oct 1, 2024. It is now read-only.

[FEATURE] Add loading state spinner and lazy loading #85

Open
1 task done
prime1999 opened this issue Jan 4, 2024 · 8 comments
Open
1 task done

[FEATURE] Add loading state spinner and lazy loading #85

prime1999 opened this issue Jan 4, 2024 · 8 comments
Labels
⭐ goal: addition 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet)

Comments

@prime1999
Copy link

Is this a unique feature?

  • I have checked "open" AND "closed" issues and this is not a duplicate

Is your feature request related to a problem/unavailable functionality? Please describe.

Just decided to improve user experience with a nice skeleton and spinner

Proposed Solution

Add loading state to repos, stats, and activity sections and also prepare a spinner and skeleton component

Screenshots

04 01 2024_15 25 03_REC

Do you want to work on this issue?

Yes

If "yes" to above, please explain how you would technically implement this

Add loading state to repos, stats, and activity sections and also prepare a spinner and skeleton component

@prime1999 prime1999 added ⭐ goal: addition 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet) labels Jan 4, 2024
@eddiejaoude
Copy link
Member

If "yes" to above, please explain how you would technically implement this

Add loading state to repos, stats, and activity sections and also prepare a spinner and skeleton component

Please explain this again with a technical solution

@prime1999
Copy link
Author

So the repos are been fetched from a backend but it will take some seconds or more for those with a bad network,
So the think is that I will create a loading state for the data that is been fetched, the stats, repos and the activities.
So if the data is still loading it will show the loader or a skeleton and also for the data that have been fetched but still yet to show on the website there will be a skeleton component for each parts.
I will extract each repo after mapping through them in the repos component and put each repo in a separate component called RepoList and call it in the repo component but they will have a fallback component to call the skeleton, something like this
04 01 2024_20 30 31_REC
04 01 2024_20 30 51_REC

@prime1999 prime1999 reopened this Jan 4, 2024
@eddiejaoude
Copy link
Member

NextJS has this built in, I think it would be better not to create our own but follow their documentation https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

@prime1999
Copy link
Author

then I will update the code, let you know

@prime1999
Copy link
Author

updated the code , I removed the spinner and used a skeleton instead so I used lazy loading as well,
https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

@eddiejaoude
Copy link
Member

ok I will take a look, where is the code?

@prime1999
Copy link
Author

here
05 01 2024_11 33 27_REC
05 01 2024_11 32 31_REC

@eddiejaoude
Copy link
Member

You have now pushed a PR we can discuss there, no need for extra notification and confusion here

This was referenced Jan 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
⭐ goal: addition 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet)
Projects
None yet
Development

No branches or pull requests

2 participants