[6.x] Improve Bard/Replicator performance during page load

resources/js/components/fieldtypes/bard/BardFieldtype.vue

@@ -93,6 +93,7 @@
                                 v-if="showAddSetButton"
                                 :sets="groupConfigs"
                                 class="bard-set-selector"
+                                :loading-set="loadingSet"
                                 @added="addSet"
                             >
                                 <template #trigger>
@@ -174,6 +175,7 @@ import { common, createLowlight } from 'lowlight';
 import 'highlight.js/styles/github.css';
 import importTiptap from '@/util/tiptap.js';
 import { computed } from 'vue';
+import { data_get } from "@/bootstrap/globals.js";
 
 const lowlight = createLowlight(common);
 let tiptap = null;
@@ -215,6 +217,8 @@ export default {
             },
             errorsById: {},
             debounceNextUpdate: true,
+	        setsCache: {},
+            loadingSet: null,
         };
     },
 
@@ -445,6 +449,10 @@ export default {
             }
         },
 
+        loadingSet(loading) {
+            this.$progress.loading('bard-set', !!loading);
+        },
+
         'publishContainer.errors': {
             immediate: true,
             handler(errors) {
@@ -469,27 +477,76 @@ export default {
 
     methods: {
         addSet(handle) {
-            const id = uniqid();
-            const deepCopy = JSON.parse(JSON.stringify(this.meta.defaults[handle]));
-            const values = Object.assign({}, { type: handle }, deepCopy);
-
-            this.updateSetMeta(id, this.meta.new[handle]);
-
-            const { $head } = this.editor.view.state.selection;
-            const { nodeBefore } = $head;
-
-            this.debounceNextUpdate = false;
-
-            // Perform this in nextTick because the meta data won't be ready until then.
-            this.$nextTick(() => {
-                if (nodeBefore) {
-                    this.editor.commands.setAt({ attrs: { id, values }, pos: $head.pos });
-                } else {
-                    this.editor.commands.set({ id, values });
-                }
-            });
+			this.loadingSet = handle;
+
+			this.fetchSet(handle)
+				.then(data => {
+					const id = uniqid();
+					const deepCopy = JSON.parse(JSON.stringify(data.defaults));
+					const values = Object.assign({}, { type: handle }, deepCopy);
+
+					this.updateSetMeta(id, data.new);
+
+					const { $head } = this.editor.view.state.selection;
+					const { nodeBefore } = $head;
+
+					this.debounceNextUpdate = false;
+
+					// Perform this in nextTick because the meta data won't be ready until then.
+					this.$nextTick(() => {
+						if (nodeBefore) {
+							this.editor.commands.setAt({ attrs: { id, values }, pos: $head.pos });
+						} else {
+							this.editor.commands.set({ id, values });
+						}
+					});
+				})
+				.catch(() => this.$toast.error(__('Something went wrong')))
+				.finally(() => this.loadingSet = null);
         },
 
+	    /**
+	     * Returns the path to the Bard field, replacing any set indexes with handles.
+	     */
+	    bardFieldPath() {
+		    if (!this.fieldPathPrefix) {
+			    return this.handle;
+		    }
+
+		    return this.fieldPathKeys
+			    .map((key, index) => {
+				    if (Number.isInteger(parseInt(key))) {
+					    return data_get(this.publishContainer.values, this.fieldPathKeys.slice(0, index + 1).join('.'))?.attrs?.values.type;
+				    }
+
+				    return key;
+			    })
+			    .filter((key) => key !== undefined)
+			    .concat(this.handle)
+			    .join('.');
+	    },
+
+	    async fetchSet(set) {
+		    return new Promise(async (resolve, reject) => {
+			    const field = this.bardFieldPath();
+			    const setCacheKey = `${field}.${set}`;
+			    const reference = this.publishContainer.reference;
+			    const blueprint = this.publishContainer.blueprint.fqh;
+
+			    if (this.setsCache[setCacheKey]) {
+				    resolve(this.setsCache[setCacheKey]);
+				    return;
+			    }
+
+			    this.$axios.post(cp_url('fieldtypes/replicator/set'), { blueprint, reference, field, set })
+				    .then(response => {
+					    this.setsCache[setCacheKey] = response.data;
+					    resolve(response.data);
+				    })
+				    .catch(error => reject(error));
+		    });
+	    },
+
         duplicateSet(old_id, attrs, getPos) {
             const id = uniqid();
             const enabled = attrs.enabled;

resources/js/components/fieldtypes/replicator/AddSetButton.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="inline-block" v-if="variant === 'button'">
-        <set-picker :enabled="enabled" :sets="groups" align="start" @added="addSet">
+        <set-picker :enabled="enabled" :sets="groups" align="start" :loading-set="loadingSet" @added="addSet">
             <template #trigger>
                 <div class="inline-flex relative pt-2" :class="{ 'pt-6': showConnector }">
                     <div v-if="showConnector" class="absolute group-hover:opacity-0 transition-opacity delay-25 duration-125 inset-y-0 h-full left-3.5 border-l-1 border-gray-400 dark:border-gray-600 border-dashed z-0 dark:bg-gray-850" />
@@ -9,7 +9,7 @@
             </template>
         </set-picker>
     </div>
-    <set-picker v-else :enabled="enabled" :sets="groups" align="center" @added="addSet">
+    <set-picker v-else :enabled="enabled" :sets="groups" align="center" :loading-set="loadingSet" @added="addSet">
         <template #trigger>
             <div
                 class="flex justify-center relative group py-3"
@@ -50,6 +50,7 @@ const props = defineProps({
     showConnector: { type: Boolean, default: true },
     variant: { type: String, default: 'button' },
     isFirst: { type: Boolean, default: false },
+    loadingSet: { type: String, default: null },
 });
 
 const label = computed(() => props.label ? __(props.label) : __('Add Block'));

resources/js/components/fieldtypes/replicator/Replicator.vue

@@ -60,6 +60,7 @@
                                             :index="index"
                                             :enabled="canAddSet"
                                             :is-first="index === 0"
+                                            :loading-set="loadingSet"
                                             @added="addSet"
                                         />
                                     </template>
@@ -75,6 +76,7 @@
                             :index="value.length"
                             :label="config.button_label"
                             :is-first="value.length === 0"
+                            :loading-set="loadingSet"
                             @added="addSet"
                         />
                     </section>
@@ -91,6 +93,7 @@ import ReplicatorSet from './Set.vue';
 import AddSetButton from './AddSetButton.vue';
 import ManagesSetMeta from './ManagesSetMeta';
 import { SortableList } from '../../sortable/Sortable';
+import { data_get } from "@/bootstrap/globals.js";
 
 export default {
     mixins: [Fieldtype, ManagesSetMeta],
@@ -112,6 +115,8 @@ export default {
                 showReplicatorFieldPreviews: this.config.previews,
             },
             errorsById: {},
+	        setsCache: {},
+            loadingSet: null,
         };
     },
 
@@ -205,20 +210,69 @@ export default {
         },
 
         addSet(handle, index) {
-            const set = {
-                ...JSON.parse(JSON.stringify(this.meta.defaults[handle])),
-                _id: uniqid(),
-                type: handle,
-                enabled: true,
-            };
+			this.loadingSet = handle;
 
-            this.updateSetMeta(set._id, this.meta.new[handle]);
+			this.fetchSet(handle)
+				.then(data => {
+					const set = {
+						...JSON.parse(JSON.stringify(data.defaults)),
+						_id: uniqid(),
+						type: handle,
+						enabled: true,
+					};
 
-            this.update([...this.value.slice(0, index), set, ...this.value.slice(index)]);
+					this.updateSetMeta(set._id, data.new);
 
-            this.expandSet(set._id);
+					this.update([...this.value.slice(0, index), set, ...this.value.slice(index)]);
+
+					this.expandSet(set._id);
+				})
+				.catch(() => this.$toast.error(__('Something went wrong')))
+				.finally(() => this.loadingSet = null);
         },
 
+	    /**
+	     * Returns the path to the Replicator field, replacing any set indexes with handles.
+	     */
+	    replicatorFieldPath() {
+			if (!this.fieldPathPrefix) {
+				return this.handle;
+			}
+
+			return this.fieldPathKeys
+				.map((key, index) => {
+					if (Number.isInteger(parseInt(key))) {
+						return data_get(this.publishContainer.values, this.fieldPathKeys.slice(0, index + 1).join('.'))?.type;
+					}
+
+					return key;
+				})
+				.filter((key) => key !== undefined)
+				.concat(this.handle)
+				.join('.');
+	    },
+
+	    async fetchSet(set) {
+			return new Promise(async (resolve, reject) => {
+				const field = this.replicatorFieldPath();
+				const setCacheKey = `${field}.${set}`;
+				const reference = this.publishContainer.reference;
+				const blueprint = this.publishContainer.blueprint.fqh;
+
+				if (this.setsCache[setCacheKey]) {
+					resolve(this.setsCache[setCacheKey]);
+					return;
+				}
+
+				this.$axios.post(cp_url('fieldtypes/replicator/set'), { blueprint, reference, field, set })
+					.then(response => {
+						this.setsCache[setCacheKey] = response.data;
+						resolve(response.data);
+					})
+					.catch(error => reject(error));
+			});
+	    },
+
         duplicateSet(old_id) {
             const index = this.value.findIndex((v) => v._id === old_id);
             const old = this.value[index];
@@ -311,6 +365,10 @@ export default {
             this.updateMeta({ ...this.meta, collapsed: clone(collapsed) });
         },
 
+        loadingSet(loading) {
+            this.$progress.loading('replicator-set', !!loading);
+        },
+
         'publishContainer.errors': {
             immediate: true,
             handler(errors) {

resources/js/components/fieldtypes/replicator/SetPicker.vue

@@ -48,14 +48,18 @@
                             v-for="(item, i) in group.items"
                             :key="item.handle"
                             class="cursor-pointer rounded-lg"
-                            :class="{ 'bg-gray-100 dark:bg-gray-900': selectionIndex === i }"
+                            :class="{ 
+                                'bg-gray-100 dark:bg-gray-900': selectionIndex === i,
+                                'opacity-50 pointer-events-none': isLoading
+                            }"
                             @mouseover="selectionIndex = i"
                             :title="__(item.instructions)"
                         >
-                            <div @click="addSet(item.handle)" class="p-2.5">
+                            <div @click="!isLoading && addSet(item.handle)" class="p-2.5">
                                 <div class="h-40 w-full flex items-center justify-center">
-                                    <img :src="item.image" class="rounded-lg h-40 object-contain bg-gray-50 dark:bg-gray-850" v-if="item.image" />
-                                    <ui-icon :name="item.icon || 'add-section'" :set="iconSet" class="size-8 text-gray-600 dark:text-gray-300" v-else />
+                                    <ui-icon v-if="isSetLoading(item.handle)" name="loading" class="size-8 text-gray-600 dark:text-gray-300" />
+                                    <img v-else-if="item.image" :src="item.image" class="rounded-lg h-40 object-contain bg-gray-50 dark:bg-gray-850" />
+                                    <ui-icon v-else :name="item.icon || 'add-section'" :set="iconSet" class="size-8 text-gray-600 dark:text-gray-300" />
                                 </div>
                                 <div class="line-clamp-1 text-base mt-1 text-center text-gray-900 dark:text-gray-200">
                                     {{ __(item.display || item.handle) }}
@@ -143,8 +147,14 @@
                         </div>
                         <ui-icon name="chevron-right" class="me-1 size-2" />
                     </div>
-                    <div v-if="item.type === 'set'" @click="addSet(item.handle)" class="group flex items-center rounded-xl p-2.5 gap-2 sm:gap-3">
-                        <ui-icon :name="item.icon || 'plus'" :set="iconSet" class="size-4 text-gray-600 dark:text-gray-300" />
+                    <div 
+                        v-if="item.type === 'set'" 
+                        @click="!isLoading && addSet(item.handle)" 
+                        class="group flex items-center rounded-xl p-2.5 gap-2 sm:gap-3"
+                        :class="{ 'opacity-50 pointer-events-none': isLoading }"
+                    >
+                        <ui-icon v-if="isSetLoading(item.handle)" name="loading" class="size-4 text-gray-600 dark:text-gray-300" />
+                        <ui-icon v-else :name="item.icon || 'plus'" :set="iconSet" class="size-4 text-gray-600 dark:text-gray-300" />
                         <ui-hover-card :delay="0" :open="selectionIndex === i">
                             <template #trigger>
                                 <div class="flex-1">
@@ -195,6 +205,7 @@ export default {
         sets: Array,
         enabled: { type: Boolean, default: true },
         align: { type: String, default: 'start' },
+        loadingSet: { type: String, default: null },
     },
 
     data() {
@@ -340,6 +351,10 @@ export default {
             // Modal for grid mode, Popover for list mode
             return this.mode === 'grid';
         },
+
+        isLoading() {
+            return !!this.loadingSet;
+        },
     },
 
     watch: {
@@ -362,14 +377,19 @@ export default {
         mode() {
             this.saveMode();
         },
+        loadingSet(loading, wasLoading) {
+            // Close the picker when loading completes
+            if (wasLoading && !loading) {
+                this.isOpen = false;
+                this.unselectGroup();
+                this.search = null;
+            }
+        },
     },
 
     methods: {
         addSet(handle) {
             this.$emit('added', handle);
-            this.unselectGroup();
-            this.search = null;
-            this.isOpen = false;
         },
 
         selectGroup(handle) {
@@ -453,6 +473,10 @@ export default {
                 // Ignore localStorage errors
             }
         },
+
+        isSetLoading(handle) {
+            return this.loadingSet === handle;
+        },
     },
 };
 </script>

routes/cp.php

@@ -59,6 +59,7 @@
 use Statamic\Http\Controllers\CP\Fieldtypes\IconFieldtypeController;
 use Statamic\Http\Controllers\CP\Fieldtypes\MarkdownFieldtypeController;
 use Statamic\Http\Controllers\CP\Fieldtypes\RelationshipFieldtypeController;
+use Statamic\Http\Controllers\CP\Fieldtypes\ReplicatorSetController;
 use Statamic\Http\Controllers\CP\Forms\ActionController as FormActionController;
 use Statamic\Http\Controllers\CP\Forms\FormBlueprintController;
 use Statamic\Http\Controllers\CP\Forms\FormExportController;
@@ -386,6 +387,7 @@
         Route::post('files/upload', [FilesFieldtypeController::class, 'upload'])->name('files.upload');
         Route::get('dictionaries/{dictionary}', DictionaryFieldtypeController::class)->name('dictionary-fieldtype');
         Route::post('icons', IconFieldtypeController::class)->name('icon-fieldtype');
+        Route::post('replicator/set', ReplicatorSetController::class)->name('replicator-fieldtype.set');
     });
 
     Route::group(['prefix' => 'field-action-modal'], function () {