diff --git a/webapp/src/ApiGrid.vue b/webapp/src/ApiGrid.vue
index 62ef572..51dd896 100644
--- a/webapp/src/ApiGrid.vue
+++ b/webapp/src/ApiGrid.vue
@@ -73,16 +73,16 @@
 
                             <label>Select a backend the API will connect to to serve the data</label>
                             <div>
-                              <div class="ui fluid apibackends dropdown search selection">
+                              <div class="ui fluid apibackends dropdown search selection" :class="{disabled: backendsDisabled}">
                                 <input type="hidden" name="api_backend">
                                 <i class="dropdown icon"></i>
                                 <div class="default text">Select backend</div>
                                 <div class="menu">
-                                  <div v-if="backends" v-for="(_, idx_name) in backends"
-                                      class="item"
-                                      :data-value="idx_name"
-                                  >
-                                      {{ idx_name }}
+                                  <div v-if="!isLoadingBackends && backends" v-for="(_, idx_name) in backends" class="item" :data-value="idx_name">
+                                    {{ idx_name }}
+                                  </div>
+                                  <div v-if="isLoadingBackends" class="item loading">
+                                    Loading...
                                   </div>
                                 </div>
                               </div>
@@ -138,14 +138,15 @@ export default {
   mounted () {
     const self = this
 
-    $('.ui.es_servers.dropdown').change(this.fetchIndexes)
-    $('.ui.es_servers.dropdown').dropdown()
+    $('.ui.es_servers.dropdown').dropdown().change(function() {
+      self.fetchIndexes();
+      $('.ui.apibackends.dropdown').dropdown('clear');
+    });
 
     $('.ui.apibackends.dropdown').dropdown({
-      onSearch: function (search_term) {
-        self.fetchIndexes()
-      },
-    })
+      fullTextSearch: true
+    });
+
 
     $('#apis .ui.sidebar')
       .sidebar({ context: $('#apis') })
@@ -179,6 +180,8 @@ export default {
       errors: [],
       es_servers: {},
       backends: {},
+      isLoadingBackends: false,
+      backendsDisabled: true
     }
   },
   components: { API, PaginatedList },
@@ -211,6 +214,7 @@ export default {
     },
     fetchIndexes: function() {
       const self = this
+      self.isLoadingBackends = true
       const es_server = $('.ui.es_servers.dropdown').dropdown("get value")
       const search_term = $('.ui.apibackends.dropdown').dropdown("get query")
       const server_data = self.es_servers[es_server]
@@ -227,7 +231,7 @@ export default {
       }
 
       self.loading()
-      axios.get(axios.defaults.baseURL + `/indexes_by_name?${params.toString()}`)
+      axios.get(axios.defaults.baseURL + `/indexes_by_name?${params.toString()}&limit=1000`)
         .then(response => {
           const new_backends = {}
           response.data.result.forEach(index => {
@@ -239,7 +243,7 @@ export default {
             }
           })
           self.backends = new_backends
-          
+
           self.loaded()
         })
         .catch(err => {
@@ -247,6 +251,10 @@ export default {
           console.log(err)
           self.loaderror(err)
         })
+        .finally(() => {
+          self.isLoadingBackends = false
+          self.backendsDisabled = false
+        })
     },
     createAPI: function () {
       $('#apis .ui.sidebar').sidebar('hide')
@@ -293,6 +301,7 @@ export default {
           onHidden: function () {
             $('.ui.es_servers.dropdown').dropdown("clear cache")
             $('.ui.apibackends.dropdown').dropdown("clear cache")
+            self.backendsDisabled = true
           }
         })
         .modal('show')
diff --git a/webapp/src/DiffReleaseEvent.vue b/webapp/src/DiffReleaseEvent.vue
index ccc9c70..0554440 100644
--- a/webapp/src/DiffReleaseEvent.vue
+++ b/webapp/src/DiffReleaseEvent.vue
@@ -64,17 +64,20 @@
 
                             <label>Select a backend to apply the diff to</label>
                             <div>
-                              <div class="ui fluid backendenv dropdown search selection">
+                              <div class="ui fluid backendenv dropdown search selection" :class="{disabled: backendsDisabled}">
                                 <input type="hidden" name="target_backend">
                                 <i class="dropdown icon"></i>
                                 <div class="default text">Select backend</div>
                                 <div class="menu">
-                                  <div v-if="compats" v-for="compat of compats"
+                                  <div v-if="!isLoadingBackends && compats" v-for="compat of compats"
                                       class="item"
                                       :data-value="compat.index"
                                   >
                                       {{ compat.index }}
                                   </div>
+                                  <div v-if="isLoadingBackends" class="item loading">
+                                    Loading...
+                                  </div>
                                 </div>
                               </div>
                               <br>
@@ -188,13 +191,14 @@ export default {
   mounted () {
     const self = this
 
-    $('.ui.es_servers.dropdown').change(self.fetchIndexes)
-    $('.ui.es_servers.dropdown').dropdown()
+    $('.ui.es_servers.dropdown').dropdown().change(function() {
+      self.fetchIndexes();
+      $('.ui.backendenv.dropdown').dropdown('clear');
+    });
+
     $('.ui.backendenv.dropdown').dropdown({
-      onSearch: function (search_term) {
-        self.fetchIndexes()
-      },
-    })
+      fullTextSearch: true
+    });
 
     self.fetchESServers()
   },
@@ -207,7 +211,9 @@ export default {
       errors: [],
       compats: {},
       es_servers: {},
-      selecting_build_config: null
+      selecting_build_config: null,
+      isLoadingBackends: false,
+      backendsDisabled: true
     }
   },
   computed: {
@@ -284,6 +290,7 @@ export default {
     },
     fetchIndexes () {
       const self = this
+      self.isLoadingBackends = true
       const es_server = $('.ui.es_servers.dropdown').dropdown("get value")
       const server_data = self.es_servers[es_server]
       const search_term = $('.ui.backendenv.dropdown').dropdown("get query")
@@ -299,7 +306,7 @@ export default {
         params.set("index_name", "*" + search_term + "*")
       }
 
-      axios.get(axios.defaults.baseURL + `/indexes_by_name?${params.toString()}`)
+      axios.get(axios.defaults.baseURL + `/indexes_by_name?${params.toString()}&limit=1000`)
       .then(response => {
         const indexes = response.data.result
         self.compats = self.selectCompatibles(es_server, server_data, indexes)
@@ -312,6 +319,10 @@ export default {
         self.loaderror(err)
         throw err
       })
+      .finally(() => {
+        self.isLoadingBackends = false
+        self.backendsDisabled = false
+      })
     },
     selectCompatibles (env, env_data, indexes) {
       const self = this
@@ -386,6 +397,9 @@ export default {
                 console.log(err)
                 self.loaderror(err)
               })
+          },
+          onHidden: function () {
+            self.backendsDisabled = true
           }
         })
         .modal('show')