Icu-12125 cap the number of items rendered in dropdown component (#2060)

* perf: ⚡️ cap the number of items rendered in dropdown component

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-12125

addons/core/addon/components/dropdown/index.js

@@ -16,6 +16,7 @@ export default class DropdownComponent extends Component {
 
   /**
    * Takes itemOptions and filters them by searchTerm if there is one
+   * and limits the number of items displayed in the dropdown to 500.
    * @returns {[object]}
    */
   get itemOptions() {
@@ -28,7 +29,7 @@ export default class DropdownComponent extends Component {
         return isNameMatch || isIdMatch;
       });
     }
-    return items;
+    return items.slice(0, 500);
   }
 
   // =methods

addons/core/tests/integration/components/dropdown/index-test.js

@@ -114,4 +114,31 @@ module('Integration | Component | dropdown/index', function (hooks) {
 
     assert.true(result);
   });
+
+  test('it only renders a max of 500 items but allows searching on all items', async function (assert) {
+    this.set('checkedItems', []);
+    this.set(
+      'itemOptions',
+      [...Array(600).keys()].map((k) => ({ id: k.toString() })),
+    );
+
+    await render(hbs`<Dropdown
+  @name={{this.name}}
+  @itemOptions={{this.itemOptions}}
+  @checkedItems={{this.checkedItems}}
+  @applyFilter={{this.applyFilter}}
+  @isSearchable={{true}}
+/>`);
+
+    await click(TOGGLE_DROPDOWN_SELECTOR);
+
+    assert.dom(ITEM_SELECTOR).exists({ count: 500 });
+
+    // Random number between 500 and 599 to search
+    await fillIn(SEARCH_INPUT_SELECTOR, '591');
+
+    const result = await waitUntil(() => findAll(ITEM_SELECTOR).length === 1);
+
+    assert.true(result);
+  });
 });