diff --git a/resources/js/components/fieldtypes/IconFieldtype.vue b/resources/js/components/fieldtypes/IconFieldtype.vue
index 791772bfa14..f308ba712c2 100644
--- a/resources/js/components/fieldtypes/IconFieldtype.vue
+++ b/resources/js/components/fieldtypes/IconFieldtype.vue
@@ -101,8 +101,13 @@ request();
 </script>
 
 <template>
+    <div v-if="loading" class="flex h-10 items-center gap-2 text-sm text-gray-500">
+        <Icon name="loading" class="size-4" />
+        {{ __('Loading') }}
+    </div>
+
     <Combobox
-        v-if="!loading && !isCompact"
+        v-else-if="!isCompact"
         clearable
         :disabled="config.disabled"
         :model-value="value"
@@ -135,7 +140,7 @@ request();
         </template>
     </Combobox>
 
-    <div v-else-if="!loading" class="flex items-center">
+    <div v-else class="flex items-center">
         <Button
             icon-only
             size="base"
diff --git a/resources/js/components/fieldtypes/TemplateFieldtype.vue b/resources/js/components/fieldtypes/TemplateFieldtype.vue
index 673f0f0a7bb..8dc125d6c7d 100644
--- a/resources/js/components/fieldtypes/TemplateFieldtype.vue
+++ b/resources/js/components/fieldtypes/TemplateFieldtype.vue
@@ -1,6 +1,11 @@
 <template>
+    <div v-if="loading" class="flex h-10 items-center gap-2 text-sm text-gray-500">
+        <Icon name="loading" class="size-4" />
+        {{ __('Loading') }}
+    </div>
+
     <Combobox
-        v-if="!loading"
+        v-else
         :clearable="config.clearable"
         :placeholder="__(config.placeholder)"
         :read-only="isReadOnly"
@@ -21,10 +26,10 @@
 
 <script>
 import Fieldtype from './Fieldtype.vue';
-import { Combobox } from '@/components/ui';
+import { Combobox, Icon } from '@/components/ui';
 
 export default {
-    components: { Combobox },
+    components: { Combobox, Icon },
     mixins: [Fieldtype],
 
     data: function () {