[Optimize] It is possible to optimise the logic used to load numerous contributor avatars.

[mingcheng]

Description

Depending on the circumstances, we load the avatars first and then display them when there are numerous contributors. The fact that not every user's avatar is shown simultaneously makes this incredibly wasteful.

For instance, the page https://github.com/exelban/stats/pulse is currently awaiting the loading of all contributors' avatars, which may take several minutes depending on the networking performance.

Consider displaying the avatar while loading it concurrently to speed up the loading process.

[wangyantong2000]

Yes, it does take a while now. Considering how to shorten the waiting time is a necessary thing for us.

[xiaoya-yaya]

I think users won't wait more than 5 seconds for the chart to render

[frank-zsy]

I think we may not load all the avatars, we can load like top10 to top15 for every month, and the avatars of developers with low activity in the repo may not need to be rendered.

[wangyantong2000]

Afterwards, the proposed plan will be fully considered and combined. Minimize the number of contributor avatars that need to be loaded and the waiting time for loading as much as possible.

[Xsy41]

Yes, we currently take the top 15 most active developers based on developer activity each month and add them to a collection. Then, only those developers' avatars are loaded to make the loading process more efficient.

Here’s the revised version with all three examples included:

• Stats: The number of loaded developer avatars decreased from 1673 to 550.
  (https://github.com/exelban/stats)

• Vue.js: The number of loaded developer avatars decreased from 6700 to 1700.
  (https://github.com/vuejs/vue)

• TensorFlow: The number of loaded developer avatars decreased from 4600 to 500.
  (https://github.com/tensorflow/tensorflow)

[Xsy41]

Additionally, we’ve noticed that there are some bots in our racing bar, and some of these bots have relatively high activity, which affects the aesthetics of the table. Should we consider removing or adjusting these bots?

[wangyantong2000]

Yes, we currently take the top 15 most active developers based on developer activity each month and add them to a collection. Then, only those developers' avatars are loaded to make the loading process more efficient.

Here’s the revised version with all three examples included:

• Stats: The number of loaded developer avatars decreased from 1673 to 550.
  (https://github.com/exelban/stats)
• Vue.js: The number of loaded developer avatars decreased from 6700 to 1700.
  (https://github.com/vuejs/vue)
• TensorFlow: The number of loaded developer avatars decreased from 4600 to 500.
  (https://github.com/tensorflow/tensorflow)

The current solution you are using is to select the top 15 developers per month and reduce the amount of data loaded to save time. For example, in your example, for well-known repositories like Vue, taking the top 15 developers per month, there will still be 1700 data to load. This is still a huge amount of data, and it will take a lot of time to wait (of course, less than the total loading time). For this type of repository, it may exist for a long time or with new developers joining over time, resulting in a large and constantly increasing amount of data.

Have you considered some strategies for the loading time itself? (This may require some thinking and design).
By combining this with reducing the amount of data, the effect will be better. You can try it first, and if you don't have any particularly good ideas, just handle it this way.