fixed loading icon hiding content

app/assets/javascripts/ide/components/merge_requests/dropdown.vue

 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapGetters } from 'vuex';
 import Tabs from '../../../vue_shared/components/tabs/tabs';
 import Tab from '../../../vue_shared/components/tabs/tab.vue';
 import List from './list.vue';

app/assets/javascripts/ide/components/merge_requests/list.vue

@@ -80,13 +80,7 @@ export default {
 
 <template>
   <div>
-    <loading-icon
-      class="mt-3 mb-3"
-      v-if="isLoading"
-      size="2"
-    />
-    <template v-else>
-      <div class="dropdown-input mt-3 pb-3 mb-3 border-bottom">
+    <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom">
       <input
         type="search"
         class="dropdown-input-field"
@@ -100,8 +94,16 @@ export default {
         class="fa fa-search dropdown-input-search"
       ></i>
     </div>
-      <div class="dropdown-content ide-merge-requests-dropdown-content">
-        <ul class="mb-3">
+    <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
+      <loading-icon
+        class="mt-3 mb-3 align-self-center ml-auto mr-auto"
+        v-if="isLoading"
+        size="2"
+      />
+      <ul
+        v-else
+        class="mb-3 w-100"
+      >
         <template v-if="hasMergeRequests">
           <li
             v-for="item in mergeRequests"
@@ -128,7 +130,6 @@ export default {
         </li>
       </ul>
     </div>
-    </template>
   </div>
 </template>