Limit member tribute autocomplete to 10

We currently show all members in the autocomplete menu but since
each member menu item contains an <img> avatar, a large number
of fetches are done to get all these avatars. This commit limits
the number of members listed in the autocomplete menu to avoid
doing a large number of fetches.

app/assets/javascripts/vue_shared/components/gfm_autocomplete/utils.js

@@ -4,6 +4,9 @@ import { spriteIcon } from '~/lib/utils/common_utils';
 
 const groupType = 'Group'; // eslint-disable-line @gitlab/require-i18n-strings
 
+// Number of users to show in the autocomplete menu to avoid doing a mass fetch of 100+ avatars
+const memberLimit = 10;
+
 const nonWordOrInteger = /\W|^\d+$/;
 
 export const GfmAutocompleteType = {
@@ -74,6 +77,7 @@ export const tributeConfig = {
       fillAttr: 'username',
       lookup: (value) =>
         value.type === groupType ? last(value.name.split(' / ')) : `${value.name}${value.username}`,
+      menuItemLimit: memberLimit,
       menuItemTemplate: ({ original }) => {
         const commonClasses = 'gl-avatar gl-avatar-s24 gl-flex-shrink-0';
         const noAvatarClasses = `${commonClasses} gl-rounded-small

spec/frontend/vue_shared/components/gfm_autocomplete/utils_spec.js

@@ -201,6 +201,10 @@ describe('gfm_autocomplete/utils', () => {
       expect(membersConfig.lookup(groupMember)).toBe(last(groupMember.name.split(' / ')));
     });
 
+    it('limits the items in the autocomplete menu to 10', () => {
+      expect(membersConfig.menuItemLimit).toBe(10);
+    });
+
     it('shows the avatar, name and username in the menu item for a user', () => {
       expect(membersConfig.menuItemTemplate({ original: userMember })).toMatchSnapshot();
     });