Fix: Better organization handling

coscine/issues#2860

src/modules/project/pages/components/FormMetadata.vue

@@ -187,8 +187,18 @@
         track-by="displayName"
         :show-labels="false"
         :placeholder="$t('form.project.projectOrganization')"
-        @search-change="retrieveOrganizations"
+        @search-change="retrieveMoreOrganizations"
       >
+        <template slot="afterList">
+          <div
+            v-if="organizations.length && !organizationsComplete"
+            v-observe-visibility="retrieveMoreOrganizations"
+          >
+            <div class="d-flex justify-content-left my-3 pl-3">
+              <b-spinner v-if="isLoadingOrganizations" small />
+            </div>
+          </div>
+        </template>
         <template #noOptions>
           {{ $t("form.project.projectOrganizationNoOptions") }}
         </template>
@@ -320,6 +330,7 @@ import {
 } from "@/mapping/project";
 import moment from "moment";
 import "@/plugins/deprecated/vue-multiselect";
+import "@/plugins/vue-observe-visibility";
 
 // import the store for current module
 import useProjectStore from "../../store";
@@ -407,6 +418,9 @@ export default defineComponent({
         this.projectStore.defaultOrganizations
       );
     },
+    organizationsComplete(): boolean {
+      return this.projectStore.organizationsComplete;
+    },
     visibilities(): VisibilityDto[] | null {
       return this.projectStore.visibilities;
     },
@@ -498,23 +512,14 @@ export default defineComponent({
       this.v$.projectForManipulation.keywords?.$touch();
     },
 
-    async retrieveOrganizations(search: string) {
+    async retrieveMoreOrganizations(search: string | boolean) {
       clearTimeout(this.queryTimer);
-      // Replace the list of available organizations
-      // with the default one after the search field was cleared
-      if (search.trim() === "") {
-        // See computed property organizations' definition
-        this.projectStore.organizations = null;
-      }
-      // Fetch organizations based on the search query
-      else {
-        // Add delay to API organization retrieval
-        this.queryTimer = window.setTimeout(async () => {
-          this.isLoadingOrganizations = true;
-          await this.projectStore.retrieveOrganizations(search);
-          this.isLoadingOrganizations = false;
-        }, 1000);
-      }
+      // Add delay to API organization retrieval
+      this.queryTimer = window.setTimeout(async () => {
+        this.isLoadingOrganizations = true;
+        await this.projectStore.retrieveMoreOrganizations(search);
+        this.isLoadingOrganizations = false;
+      }, 300);
     },
 
     copyMetadataFromParent() {