[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(),
  ];
  }
 

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(),
  ];
  }
 

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(),
  ];
  }
 

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(),
  ];
  }
 

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(),
  ];
  }
 

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(),
  ];
  }
 

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(),
  ];
  }
 

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(),
  ];
  }