New: Handle large amounts of application profiles

https://git.rwth-aachen.de/coscine/issues/-/issues/2691

src/modules/resource/components/create-resource/ApplicationProfile.vue

@@ -55,7 +55,18 @@
               : false,
           }"
           @input="setSelectedApplicationProfile"
+          @search-change="applicationProfileSearchChange"
         >
+          <template slot="afterList">
+            <div
+              v-if="groupedApplicationProfiles.length && !allResultsLoaded"
+              v-observe-visibility="reachedEndOfAPList"
+            >
+              <div class="d-flex justify-content-left my-3 pl-3">
+                <b-spinner v-if="isLoadingResults" small />
+              </div>
+            </div>
+          </template>
           <span slot="noResult">
             {{ $t("page.createResource.multiselect.noResults") }}
           </span>
@@ -121,6 +132,7 @@ import { defineComponent, reactive, ref, type PropType } from "vue";
 import useResourceStore from "../../store";
 import useUserStore from "@/modules/user/store";
 import "@/plugins/form-generator";
+import "@/plugins/vue-observe-visibility";
 import type { Dataset } from "@rdfjs/types";
 import type {
   BilingualLabel,
@@ -147,6 +159,10 @@ export default defineComponent({
       type: Object as PropType<ResourceForCreationDto>,
       required: true,
     },
+    allResultsLoaded: {
+      default: false,
+      type: Boolean,
+    },
     applicationProfile: {
       type: [Object, null] as PropType<Dataset | null>,
       default: null,
@@ -155,6 +171,10 @@ export default defineComponent({
       type: Array as PropType<ApplicationProfileDto[]>,
       required: true,
     },
+    isLoadingResults: {
+      default: false,
+      type: Boolean,
+    },
     isLoadingFormGenerator: {
       type: Boolean,
       required: true,
@@ -165,8 +185,10 @@ export default defineComponent({
     },
   },
   emits: {
-    valid: (_: boolean) => true,
+    applicationProfileSearchChange: (_: string) => true,
     input: (_: ResourceForCreationDto) => true,
+    reachedEndOfAPList: () => true,
+    valid: (_: boolean) => true,
   },
   setup(props) {
     const resourceStore = useResourceStore();
@@ -227,6 +249,12 @@ export default defineComponent({
   },
 
   methods: {
+    /**
+     * Trigger the search term change in the parent component.
+     */
+    applicationProfileSearchChange(searchTerm: string) {
+      this.$emit("applicationProfileSearchChange", searchTerm);
+    },
     /**
      * Initializes the content of the selected application profile based on the current state of the resource for creation.
      */
@@ -327,6 +355,15 @@ export default defineComponent({
       return groupedProfiles;
     },
 
+    /**
+     * Propagate that end of AP list has been hit.
+     */
+    reachedEndOfAPList() {
+      if (!this.allResultsLoaded) {
+        this.$emit("reachedEndOfAPList");
+      }
+    },
+
     /**
      * Sets the selected application profile.
      */