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

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

@@ -94,6 +94,7 @@
                                 v-if="showAddSetButton"
                                 :sets="groupConfigs"
                                 class="bard-set-selector"
+                                :loading-set="loadingSet"
                                 @added="addSet"
                             >
                                 <template #trigger>
@@ -175,6 +176,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;
@@ -217,6 +219,8 @@ export default {
             },
             errorsById: {},
             debounceNextUpdate: true,
+            setsCache: {},
+            loadingSet: null,
         };
     },
 
@@ -457,6 +461,10 @@ export default {
             }
         },
 
+        loadingSet(loading) {
+            this.$progress.loading('bard-set', !!loading);
+        },
+
         'publishContainer.errors': {
             immediate: true,
             handler(errors) {
@@ -481,11 +489,20 @@ export default {
 
     methods: {
         addSet(handle) {
+            this.loadingSet = handle;
+
+            this.fetchSet(handle)
+                .then(data => this._addSet(handle, index, data))
+                .catch(() => this.$toast.error(__('Something went wrong')))
+                .finally(() => this.loadingSet = null);
+        },
+
+        _addSet(handle, index, data) {
             const id = uniqid();
-            const deepCopy = JSON.parse(JSON.stringify(this.meta.defaults[handle]));
+            const deepCopy = JSON.parse(JSON.stringify(data.defaults));
             const values = Object.assign({}, { type: handle }, deepCopy);
 
-            this.updateSetMeta(id, this.meta.new[handle]);
+            this.updateSetMeta(id, data.new);
 
             const { $head } = this.editor.view.state.selection;
             const { nodeBefore } = $head;
@@ -502,6 +519,48 @@ export default {
             });
         },
 
+        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));
+            });
+        },
+
+        /**
+         * 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('.');
+        },
+
         duplicateSet(old_id, attrs, getPos) {
             const id = uniqid();
             const enabled = attrs.enabled;
@@ -756,7 +815,7 @@ export default {
                 enableInputRules: this.config.enable_input_rules,
                 enablePasteRules: this.config.enable_paste_rules,
                 editorProps: { attributes: { class: 'bard-content' } },
-	            onDrop: () => this.debounceNextUpdate = false,
+                onDrop: () => this.debounceNextUpdate = false,
                 onFocus: () => {
                     this.hasBeenFocused = true;
                     this.$emit('focus');

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"
@@ -55,6 +55,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,19 +210,70 @@ export default {
         },
 
         addSet(handle, index) {
+            this.loadingSet = handle;
+
+            this.fetchSet(handle)
+                .then(data => this._addSet(handle, index, data))
+                .catch(() => this.$toast.error(__('Something went wrong')))
+                .finally(() => this.loadingSet = null);
+        },
+
+        _addSet(handle, index, data) {
             const set = {
-                ...JSON.parse(JSON.stringify(this.meta.defaults[handle])),
+                ...JSON.parse(JSON.stringify(data.defaults)),
                 _id: uniqid(),
                 type: handle,
                 enabled: true,
             };
 
-            this.updateSetMeta(set._id, this.meta.new[handle]);
+            this.updateSetMeta(set._id, data.new);
+
+            this.$nextTick(() => {
+                this.update([...this.value.slice(0, index), set, ...this.value.slice(index)]);
+                this.expandSet(set._id);
+            });
+        },
+
+        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));
+            });
+        },
+
+        /**
+         * 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;
+                    }
 
-			this.$nextTick(() => {
-				this.update([...this.value.slice(0, index), set, ...this.value.slice(index)]);
-				this.expandSet(set._id);
-			});
+                    return key;
+                })
+                .filter((key) => key !== undefined)
+                .concat(this.handle)
+                .join('.');
         },
 
         duplicateSet(old_id) {
@@ -312,6 +368,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">
@@ -177,7 +187,7 @@
 
 <style>
 body:has(:is(.bard-fullscreen, .replicator-fullscreen)) [data-reka-popper-content-wrapper] {
-	z-index: var(--z-index-portal) !important;
+    z-index: var(--z-index-portal) !important;
 }
 </style>
 
@@ -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) {
@@ -455,6 +475,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 () {

src/Fields/Blueprint.php

@@ -80,7 +80,7 @@ public function renderableNamespace(): string
         return str_replace('.', ' ', Str::humanize($this->namespace));
     }
 
-    public function fullyQualifiedHandle(): string
+    public function fullyQualifiedHandle(): ?string
     {
         $handle = $this->handle();
 
@@ -452,6 +452,7 @@ public function toPublishArray()
             'handle' => $this->handle(),
             'tabs' => $this->tabs()->map->toPublishArray()->values()->all(),
             'empty' => $this->isEmpty(),
+            'fqh' => $this->fullyQualifiedHandle(),
         ];
     }