[Bug] Fix the rate limit exceed of GitHub API on contributors page #1423
Description
Description
Rate Limit of GitHub API is getting exceeded while loading individual avatars and names of the contributors on the contributors page of the application.
I diagnosed this in my local testing is being caused by following lines
...
fetch(contributor.url)
.then(contributorDetails => contributorDetails.json())
.then(contributorData => {
const displayName = contributorData.name || contributor.login;
...As we can see, for each contributor specific contributor data is being fetched and loaded as contributorData but all it is being used as in the document is for the display name of the individual. Large amounts of fetch requests and rate limiting error issue can be avoided by not fetching this contributor.url for just the "name" of the contributor and instead using the already in use as fallback contributor.login that is the username as display name for all users. Either way the rate limit results in most of the contributors display names being fallback to username only.
So I propose the following improvements
- Remove the contributor.url fetch and use contributor.login as username
- Implement lazy loading for avatars of the contributors
- Introduce an avatar fallback icon / svg if avatar fetch fails or is loading
- Implement infinite scroll functionality so that number of queries can be further reduced. Infinite scroll methodology will only fetch further contributors on scroll to fill the viewport.
- Add contributions count bubble on avatars top right corner which show how many contributions they did to the repo, its available in the data we fetch but is not in use.
Screenshots
Developer tools > Network tab:
Developer tools > Console
Checklist
- I have checked the existing issues.
- I follow Contributing Guidelines of this project.
- I am a KWOC'24 contributor.
Code of Conduct
- I agree to follow this project's "Code of Conduct".