Make group-level project select faster and more efficient
When you're creating a group-level issue/MR/Milestone, and click the button to select a project, we send off an ajax request for the 20 projects with the most recent activity. If the user closes the dropdown without selecting one and tries again, or types a query in the search box, we hide the list, show the loading icon, query the database to find matching projects, and re-display all matched projects.
The time it takes to fetch new issues is fairly long and there is quite a lot of data duplication going on in during these interactions.
We could make the user experience of this feature much faster (and reduce the server load as well), by:
- caching all returned results on the frontend in memory, or perhaps in sessionStorage or localStorage
- caching the results of specific queries to prevent duplicate requests
- updating the cache with new results and dynamically updating the dropdown without loading/refreshing
From the user's perspective, during a given session (until you close your browser window), you would have to load projects once and only once, and the rest of the time, you'd see the dropdown list instantaneously with no request to the server required.
This would not be overly difficult with Vue and DropLab, although it would require some effort to refactor the existing ProjectSelect
. I don't believe it would require much, if any backend support.
Design
The dropdown should use the same design as our other select dropdowns that use checkboxes to indicate what has been selected. The milestone dropdown is an example of the design to follow:
cc: @victorwu