From 25aa3087a7c7e8ef032e1207686d162eceff7a42 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 4 Aug 2026 09:55:24 +0100
Subject: [PATCH 1/2] only preload meta for the selected link type

`Link::preload()` built the full nested relationship meta for every registered
link type on every instance of the field. In a nested Replicator with hundreds
of link fields, that's hundreds of byte-identical copies of the same config
derived payload. The rest are now fetched from `fields/field-meta` the first
time the user picks that type.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../components/fieldtypes/LinkFieldtype.vue   | 42 +++++++++---
 .../fieldtypes/LinkFieldtype.test.js          | 65 ++++++++++++++++++-
 src/Fieldtypes/Link.php                       |  6 +-
 tests/Fieldtypes/LinkTest.php                 | 46 +++++++++++++
 4 files changed, 146 insertions(+), 13 deletions(-)

diff --git a/resources/js/components/fieldtypes/LinkFieldtype.vue b/resources/js/components/fieldtypes/LinkFieldtype.vue
index d0797f6d47..3fb2ccc4e0 100644
--- a/resources/js/components/fieldtypes/LinkFieldtype.vue
+++ b/resources/js/components/fieldtypes/LinkFieldtype.vue
@@ -9,7 +9,7 @@
             <Input v-if="option === 'url'" :read-only="isReadOnly" v-model="urlValue" />
 
             <component
-                v-else-if="matchedType"
+                v-else-if="matchedType && matchedType.meta"
                 :is="matchedTypeComponent"
                 ref="typeField"
                 :config="matchedType.config"
@@ -17,21 +17,23 @@
                 :value="selectedByType[option]"
                 :handle="option"
                 @update:value="typeSelected"
-                @update:meta="updateTypeMeta"
+                @update:meta="updateTypeMeta(option, $event)"
             />
+
+            <Icon v-else-if="matchedType" name="loading" class="size-4 self-center" />
         </div>
     </div>
 </template>
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import { Input, Select } from '@/components/ui';
+import { Icon, Input, Select } from '@/components/ui';
 import debounce from '@/util/debounce.js';
 import { markRaw } from 'vue';
 import { UPDATE_DEBOUNCE_MS } from './constants';
 
 export default {
-    components: { Input, Select },
+    components: { Icon, Input, Select },
     mixins: [Fieldtype],
 
     provide: {
@@ -53,6 +55,8 @@ export default {
             this.update(url);
             this.updateMeta({ ...this.meta, initialUrl: url });
         }, UPDATE_DEBOUNCE_MS));
+
+        if (this.matchedType) this.loadTypeMeta(this.option);
     },
 
     computed: {
@@ -96,9 +100,13 @@ export default {
             } else if (option === 'first-child') {
                 this.update('@child');
             } else if (this.matchedType) {
-                this.typeValue
-                    ? this.update(this.typeValue)
-                    : this.$nextTick(() => this.openTypeSelector());
+                this.loadTypeMeta(option).then(() => {
+                    if (this.option !== option) return;
+
+                    this.typeValue
+                        ? this.update(this.typeValue)
+                        : this.$nextTick(() => this.openTypeSelector());
+                });
             }
 
             this.updateMeta({ ...this.meta, initialOption: option });
@@ -140,6 +148,22 @@ export default {
             );
         },
 
+        loadTypeMeta(handle) {
+            const type = this.meta.types[handle];
+
+            if (!type || type.meta) return Promise.resolve();
+
+            const params = {
+                config: utf8btoa(JSON.stringify({ ...type.config, handle })),
+                value: this.selectedByType[handle]?.[0] ?? null,
+            };
+
+            return this.$axios
+                .post(cp_url('fields/field-meta'), params)
+                .then((response) => this.updateTypeMeta(handle, response.data.meta))
+                .catch((e) => this.$toast.error(e.response?.data?.message || __('Something went wrong')));
+        },
+
         openTypeSelector() {
             const field = this.$refs.typeField;
 
@@ -161,12 +185,12 @@ export default {
             });
         },
 
-        updateTypeMeta(typeMeta) {
+        updateTypeMeta(handle, typeMeta) {
             this.updateMeta({
                 ...this.meta,
                 types: {
                     ...this.meta.types,
-                    [this.option]: { ...this.meta.types[this.option], meta: typeMeta },
+                    [handle]: { ...this.meta.types[handle], meta: typeMeta },
                 },
             });
         },
diff --git a/resources/js/tests/components/fieldtypes/LinkFieldtype.test.js b/resources/js/tests/components/fieldtypes/LinkFieldtype.test.js
index 4cf04a0c65..4c0bda1c70 100644
--- a/resources/js/tests/components/fieldtypes/LinkFieldtype.test.js
+++ b/resources/js/tests/components/fieldtypes/LinkFieldtype.test.js
@@ -1,12 +1,13 @@
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount } from '@vue/test-utils';
 import { expect, test, vi } from 'vitest';
 import * as Globals from '@/bootstrap/globals';
 import LinkFieldtype from '@/components/fieldtypes/LinkFieldtype.vue';
 
 Object.keys(Globals).forEach((fn) => (window[fn] = Globals[fn]));
 window.__ = (key) => key;
+window.Statamic = { $config: { get: (key) => ({ cpUrl: '/cp' })[key] } };
 
-function mountField({ value = null, config = {}, meta = {}, showFieldPreviews = false } = {}) {
+function mountField({ value = null, config = {}, meta = {}, showFieldPreviews = false, axiosPost } = {}) {
     return mount(LinkFieldtype, {
         shallow: true,
         props: {
@@ -22,6 +23,11 @@ function mountField({ value = null, config = {}, meta = {}, showFieldPreviews =
             },
             showFieldPreviews,
         },
+        global: {
+            mocks: {
+                $axios: { post: axiosPost ?? vi.fn(() => Promise.resolve({ data: { meta: {} } })) },
+            },
+        },
     });
 }
 
@@ -213,3 +219,58 @@ test('replicatorPreview falls back to the type reference when there is no item d
 
     expect(wrapper.vm.replicatorPreview).toBe('entry::4');
 });
+
+test('does not request meta for a type that was already preloaded', async () => {
+    const post = vi.fn(() => Promise.resolve({ data: { meta: {} } }));
+
+    const wrapper = mountField({
+        axiosPost: post,
+        meta: {
+            initialOption: 'entry',
+            types: {
+                entry: { title: 'Entries', component: 'relationship', config: {}, meta: { data: [] }, selected: [] },
+            },
+        },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(post).not.toHaveBeenCalled();
+});
+
+test('requests meta the first time a type without preloaded meta is picked', async () => {
+    const post = vi.fn(() => Promise.resolve({ data: { meta: { data: [] } } }));
+
+    const wrapper = mountField({
+        axiosPost: post,
+        meta: {
+            types: {
+                entry: {
+                    title: 'Entries',
+                    component: 'relationship',
+                    config: { type: 'entries', max_items: 1 },
+                    meta: null,
+                    selected: [],
+                },
+            },
+        },
+    });
+
+    wrapper.vm.option = 'entry';
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledTimes(1);
+    expect(post.mock.calls[0][0]).toBe('/cp/fields/field-meta');
+    expect(JSON.parse(atob(post.mock.calls[0][1].config))).toEqual({
+        type: 'entries',
+        max_items: 1,
+        handle: 'entry',
+    });
+    expect(wrapper.emitted('update:meta').at(-1)[0].types.entry.meta).toEqual({ data: [] });
+
+    wrapper.vm.option = 'url';
+    wrapper.vm.option = 'entry';
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledTimes(1);
+});
diff --git a/src/Fieldtypes/Link.php b/src/Fieldtypes/Link.php
index ed09a8a207..afc9c5c0a5 100644
--- a/src/Fieldtypes/Link.php
+++ b/src/Fieldtypes/Link.php
@@ -128,6 +128,8 @@ public function preload()
 
         $url = ($value !== '@child' && ! $linkType) ? $value : null;
 
+        $initialOption = $this->initialOption($value, $linkType);
+
         $types = [];
 
         foreach (static::types() as $handle => $type) {
@@ -149,14 +151,14 @@ public function preload()
                 'title' => $type->title(),
                 'component' => $nestedFieldtype->component(),
                 'config' => $nestedFieldtype->config(),
-                'meta' => $nestedFieldtype->preload(),
+                'meta' => $handle === $initialOption ? $nestedFieldtype->preload() : null,
                 'selected' => $selected ? [$selected] : [],
             ];
         }
 
         return [
             'initialUrl' => $url,
-            'initialOption' => $this->initialOption($value, $linkType),
+            'initialOption' => $initialOption,
             'showFirstChildOption' => $this->showFirstChildOption(),
             'types' => $types,
         ];
diff --git a/tests/Fieldtypes/LinkTest.php b/tests/Fieldtypes/LinkTest.php
index fc94945d9e..691d889749 100644
--- a/tests/Fieldtypes/LinkTest.php
+++ b/tests/Fieldtypes/LinkTest.php
@@ -394,6 +394,52 @@ public function it_excludes_a_custom_type_with_a_null_fieldtype_from_preload()
         $this->assertArrayNotHasKey('link-extend-test-no-picker', $fieldtype->preload()['types']);
     }
 
+    #[Test]
+    public function it_only_preloads_meta_for_the_initial_option()
+    {
+        $this->setUpRoutableCollection();
+
+        Facades\AssetContainer::make('assets')->disk('local')->save();
+
+        $field = new Field('test', ['type' => 'link', 'container' => 'assets']);
+        $field->setValue('entry::123');
+
+        $types = (new Link)->setField($field)->preload()['types'];
+
+        $this->assertNotNull($types['entry']['meta']);
+        $this->assertNull($types['asset']['meta']);
+    }
+
+    #[Test]
+    public function it_preloads_meta_for_the_default_option_when_there_is_no_value()
+    {
+        $this->setUpRoutableCollection();
+
+        Facades\AssetContainer::make('assets')->disk('local')->save();
+
+        $field = new Field('test', ['type' => 'link', 'container' => 'assets', 'default_option' => 'asset']);
+
+        $types = (new Link)->setField($field)->preload()['types'];
+
+        $this->assertNull($types['entry']['meta']);
+        $this->assertNotNull($types['asset']['meta']);
+    }
+
+    #[Test]
+    public function it_preloads_no_type_meta_when_there_is_no_initial_option()
+    {
+        $this->setUpRoutableCollection();
+
+        Facades\AssetContainer::make('assets')->disk('local')->save();
+
+        $field = new Field('test', ['type' => 'link', 'container' => 'assets']);
+
+        $types = (new Link)->setField($field)->preload()['types'];
+
+        $this->assertNull($types['entry']['meta']);
+        $this->assertNull($types['asset']['meta']);
+    }
+
     #[Test]
     public function it_includes_custom_type_and_icon_in_pre_process_index()
     {

From 168b130224f7c388df84373baaf98ce75529c971 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 5 Aug 2026 09:07:25 +0100
Subject: [PATCH 2/2] track meta fetch status with a `metaLoaded` flag

`null` is also what a legitimately loaded meta looks like for any fieldtype
that doesn't override `Fieldtype::preload()`, so custom link types built on
plain fieldtypes (like `text`) were stuck on the loading spinner forever.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../components/fieldtypes/LinkFieldtype.vue   |  6 +-
 .../fieldtypes/LinkFieldtype.test.js          | 61 ++++++++++++++++---
 src/Fieldtypes/Link.php                       |  1 +
 tests/Fieldtypes/LinkTest.php                 | 19 ++++++
 4 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/resources/js/components/fieldtypes/LinkFieldtype.vue b/resources/js/components/fieldtypes/LinkFieldtype.vue
index 3fb2ccc4e0..a1db7fea38 100644
--- a/resources/js/components/fieldtypes/LinkFieldtype.vue
+++ b/resources/js/components/fieldtypes/LinkFieldtype.vue
@@ -9,7 +9,7 @@
             <Input v-if="option === 'url'" :read-only="isReadOnly" v-model="urlValue" />
 
             <component
-                v-else-if="matchedType && matchedType.meta"
+                v-else-if="matchedType && matchedType.metaLoaded"
                 :is="matchedTypeComponent"
                 ref="typeField"
                 :config="matchedType.config"
@@ -151,7 +151,7 @@ export default {
         loadTypeMeta(handle) {
             const type = this.meta.types[handle];
 
-            if (!type || type.meta) return Promise.resolve();
+            if (!type || type.metaLoaded) return Promise.resolve();
 
             const params = {
                 config: utf8btoa(JSON.stringify({ ...type.config, handle })),
@@ -190,7 +190,7 @@ export default {
                 ...this.meta,
                 types: {
                     ...this.meta.types,
-                    [handle]: { ...this.meta.types[handle], meta: typeMeta },
+                    [handle]: { ...this.meta.types[handle], meta: typeMeta, metaLoaded: true },
                 },
             });
         },
diff --git a/resources/js/tests/components/fieldtypes/LinkFieldtype.test.js b/resources/js/tests/components/fieldtypes/LinkFieldtype.test.js
index 4c0bda1c70..241847a9a8 100644
--- a/resources/js/tests/components/fieldtypes/LinkFieldtype.test.js
+++ b/resources/js/tests/components/fieldtypes/LinkFieldtype.test.js
@@ -36,8 +36,8 @@ test('builds dropdown options from the url, first child, and registered types',
         meta: {
             showFirstChildOption: true,
             types: {
-                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, selected: [] },
-                asset: { title: 'Assets', component: 'assets', config: {}, meta: {}, selected: [] },
+                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, metaLoaded: true, selected: [] },
+                asset: { title: 'Assets', component: 'assets', config: {}, meta: {}, metaLoaded: true, selected: [] },
             },
         },
     });
@@ -90,7 +90,7 @@ test('selecting a type with an existing selection emits the type reference immed
     const wrapper = mountField({
         meta: {
             types: {
-                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, selected: ['4'] },
+                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, metaLoaded: true, selected: ['4'] },
             },
         },
     });
@@ -107,7 +107,7 @@ test('selecting a type with no existing selection does not emit a value', async
     const wrapper = mountField({
         meta: {
             types: {
-                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, selected: [] },
+                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, metaLoaded: true, selected: [] },
             },
         },
     });
@@ -124,7 +124,7 @@ test('typeSelected stores the selection and emits the type reference', () => {
         meta: {
             initialOption: 'entry',
             types: {
-                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, selected: ['1'] },
+                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, metaLoaded: true, selected: ['1'] },
             },
         },
     });
@@ -139,8 +139,8 @@ test('initial selected values are indexed by type', () => {
     const wrapper = mountField({
         meta: {
             types: {
-                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, selected: ['4'] },
-                asset: { title: 'Assets', component: 'assets', config: {}, meta: {}, selected: [] },
+                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, metaLoaded: true, selected: ['4'] },
+                asset: { title: 'Assets', component: 'assets', config: {}, meta: {}, metaLoaded: true, selected: [] },
             },
         },
     });
@@ -177,6 +177,7 @@ test('replicatorPreview prefers the selected item title for a registered type',
                     component: 'relationship',
                     config: {},
                     meta: { data: [{ title: 'About Us' }] },
+                    metaLoaded: true,
                     selected: ['4'],
                 },
             },
@@ -197,6 +198,7 @@ test('replicatorPreview falls back to the basename when there is no title', () =
                     component: 'assets',
                     config: {},
                     meta: { data: [{ basename: 'photo.jpg' }] },
+                    metaLoaded: true,
                     selected: ['4'],
                 },
             },
@@ -212,7 +214,7 @@ test('replicatorPreview falls back to the type reference when there is no item d
         meta: {
             initialOption: 'entry',
             types: {
-                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, selected: ['4'] },
+                entry: { title: 'Entries', component: 'relationship', config: {}, meta: {}, metaLoaded: true, selected: ['4'] },
             },
         },
     });
@@ -228,7 +230,7 @@ test('does not request meta for a type that was already preloaded', async () =>
         meta: {
             initialOption: 'entry',
             types: {
-                entry: { title: 'Entries', component: 'relationship', config: {}, meta: { data: [] }, selected: [] },
+                entry: { title: 'Entries', component: 'relationship', config: {}, meta: { data: [] }, metaLoaded: true, selected: [] },
             },
         },
     });
@@ -250,6 +252,7 @@ test('requests meta the first time a type without preloaded meta is picked', asy
                     component: 'relationship',
                     config: { type: 'entries', max_items: 1 },
                     meta: null,
+                    metaLoaded: false,
                     selected: [],
                 },
             },
@@ -266,7 +269,10 @@ test('requests meta the first time a type without preloaded meta is picked', asy
         max_items: 1,
         handle: 'entry',
     });
-    expect(wrapper.emitted('update:meta').at(-1)[0].types.entry.meta).toEqual({ data: [] });
+    expect(wrapper.emitted('update:meta').at(-1)[0].types.entry).toMatchObject({
+        meta: { data: [] },
+        metaLoaded: true,
+    });
 
     wrapper.vm.option = 'url';
     wrapper.vm.option = 'entry';
@@ -274,3 +280,38 @@ test('requests meta the first time a type without preloaded meta is picked', asy
 
     expect(post).toHaveBeenCalledTimes(1);
 });
+
+test('does not request meta again for a type whose fieldtype has no meta to preload', async () => {
+    const post = vi.fn(() => Promise.resolve({ data: { meta: null } }));
+
+    const wrapper = mountField({
+        axiosPost: post,
+        meta: {
+            types: {
+                email: {
+                    title: 'Email',
+                    component: 'text',
+                    config: { type: 'text' },
+                    meta: null,
+                    metaLoaded: false,
+                    selected: [],
+                },
+            },
+        },
+    });
+
+    wrapper.vm.option = 'email';
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledTimes(1);
+    expect(wrapper.emitted('update:meta').at(-1)[0].types.email.metaLoaded).toBe(true);
+
+    await wrapper.setProps({ meta: wrapper.emitted('update:meta').at(-1)[0] });
+
+    wrapper.vm.option = 'url';
+    await flushPromises();
+    wrapper.vm.option = 'email';
+    await flushPromises();
+
+    expect(post).toHaveBeenCalledTimes(1);
+});
diff --git a/src/Fieldtypes/Link.php b/src/Fieldtypes/Link.php
index afc9c5c0a5..65fb1c3a1a 100644
--- a/src/Fieldtypes/Link.php
+++ b/src/Fieldtypes/Link.php
@@ -152,6 +152,7 @@ public function preload()
                 'component' => $nestedFieldtype->component(),
                 'config' => $nestedFieldtype->config(),
                 'meta' => $handle === $initialOption ? $nestedFieldtype->preload() : null,
+                'metaLoaded' => $handle === $initialOption,
                 'selected' => $selected ? [$selected] : [],
             ];
         }
diff --git a/tests/Fieldtypes/LinkTest.php b/tests/Fieldtypes/LinkTest.php
index 691d889749..7a1e6156c4 100644
--- a/tests/Fieldtypes/LinkTest.php
+++ b/tests/Fieldtypes/LinkTest.php
@@ -407,7 +407,9 @@ public function it_only_preloads_meta_for_the_initial_option()
         $types = (new Link)->setField($field)->preload()['types'];
 
         $this->assertNotNull($types['entry']['meta']);
+        $this->assertTrue($types['entry']['metaLoaded']);
         $this->assertNull($types['asset']['meta']);
+        $this->assertFalse($types['asset']['metaLoaded']);
     }
 
     #[Test]
@@ -422,7 +424,9 @@ public function it_preloads_meta_for_the_default_option_when_there_is_no_value()
         $types = (new Link)->setField($field)->preload()['types'];
 
         $this->assertNull($types['entry']['meta']);
+        $this->assertFalse($types['entry']['metaLoaded']);
         $this->assertNotNull($types['asset']['meta']);
+        $this->assertTrue($types['asset']['metaLoaded']);
     }
 
     #[Test]
@@ -437,7 +441,22 @@ public function it_preloads_no_type_meta_when_there_is_no_initial_option()
         $types = (new Link)->setField($field)->preload()['types'];
 
         $this->assertNull($types['entry']['meta']);
+        $this->assertFalse($types['entry']['metaLoaded']);
         $this->assertNull($types['asset']['meta']);
+        $this->assertFalse($types['asset']['metaLoaded']);
+    }
+
+    #[Test]
+    public function it_marks_meta_as_loaded_for_a_type_whose_fieldtype_preloads_nothing()
+    {
+        Link::extend('link-extend-test-basic-preload', TestBasicLinkType::class);
+
+        $field = new Field('test', ['type' => 'link', 'default_option' => 'link-extend-test-basic-preload']);
+
+        $types = (new Link)->setField($field)->preload()['types'];
+
+        $this->assertNull($types['link-extend-test-basic-preload']['meta']);
+        $this->assertTrue($types['link-extend-test-basic-preload']['metaLoaded']);
     }
 
     #[Test]