github-community-projects / github-community-projects/private-mirrors

Large number of forks causes long page load times

Open
#442 0 comments 1 reaction 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
196
Forks
41
Avg merge
1d 9h
Merged PRs (30d)
4

Description

### Describe the bug

When using the private mirrors UI to view the list of forks for an organization that contains a large number of forks the page can take a long time to initially load despite the use of pagination.

### To Reproduce

1. Open the private-mirrors UI
2. Open the browser developer console to ensure that network logs are being captured
3. Navigate to an organization that contains a lot of mirrors (in testing 150 repositories cause the load to take about 30 seconds)
4. Look through the network logs and add up the time that it takes for all of the ["getReposInOrgGQL" queries](https://github.com/github-community-projects/private-mirrors/blob/fdcb497ca912903d26f9d32b999d1054a618379a/src/bot/graphql.ts#L156) to run

### Expected behavior

The private-mirrors UI should effectively paginate and lazy load the fork list to avoid making the user wait for all fork details to load before displaying any of them. The ["getReposInOrgGQL" query](https://github.com/github-community-projects/private-mirrors/blob/fdcb497ca912903d26f9d32b999d1054a618379a/src/bot/graphql.ts#L156) and [useForksData function](https://github.com/github-community-projects/private-mirrors/blob/fdcb497ca912903d26f9d32b999d1054a618379a/src/hooks/useForks.tsx#L58) should also be investigated to determine if other optimizations can and should be made.

### Screenshots

_No response_

### Additional context

_No response_

Contributor guide

Open the contributing guide

Research direction

Read src/bot/graphql.ts around getReposInOrgGQL and src/hooks/useForks.tsx around useForksData, then reproduce the delay with an organization containing many mirrors while recording network logs. Identify why the paginated UI waits on multiple fork-detail queries; done means the fork list displays without waiting for all details and the request time is reduced.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.