Add skeleton loaders to o2m/m2m

app/src/components/v-skeleton-loader/v-skeleton-loader.vue

@@ -74,6 +74,30 @@ body {
 	height: var(--input-height-tall);
 }
 
+.block-list-item {
+	width: 100%;
+	height: var(--input-height);
+	border-radius: var(--border-radius);
+
+	@include loader;
+
+	& + & {
+		margin-top: 8px;
+	}
+}
+
+.block-list-item-dense {
+	width: 100%;
+	height: 44px;
+	border-radius: var(--border-radius);
+
+	@include loader;
+
+	& + & {
+		margin-top: 4px;
+	}
+}
+
 .text {
 	flex-grow: 1;
 	height: 12px;

app/src/interfaces/many-to-many/many-to-many.vue

@@ -3,11 +3,19 @@
 		{{ $t('relationship_not_setup') }}
 	</v-notice>
 	<div class="many-to-many" v-else>
-		<v-notice v-if="sortedItems.length === 0">
+		<template v-if="loading">
+			<v-skeleton-loader
+				v-for="n in (value || []).length || 3"
+				:key="n"
+				:type="(value || []).length > 4 ? 'block-list-item-dense' : 'block-list-item'"
+			/>
+		</template>
+
+		<v-notice v-else-if="sortedItems.length === 0">
 			{{ $t('no_items') }}
 		</v-notice>
 
-		<v-list>
+		<v-list v-else>
 			<draggable
 				:force-fallback="true"
 				:value="sortedItems"

app/src/interfaces/one-to-many/one-to-many.vue

@@ -3,11 +3,19 @@
 		{{ $t('relationship_not_setup') }}
 	</v-notice>
 	<div class="one-to-many" v-else>
-		<v-notice v-if="sortedItems.length === 0">
+		<template v-if="loading">
+			<v-skeleton-loader
+				v-for="n in (value || []).length || 3"
+				:key="n"
+				:type="(value || []).length > 4 ? 'block-list-item-dense' : 'block-list-item'"
+			/>
+		</template>
+
+		<v-notice v-else-if="sortedItems.length === 0">
 			{{ $t('no_items') }}
 		</v-notice>
 
-		<v-list>
+		<v-list v-else>
 			<draggable
 				:force-fallback="true"
 				:value="sortedItems"
@@ -68,7 +76,6 @@ import { useCollectionsStore, useRelationsStore, useFieldsStore } from '@/stores
 import DrawerItem from '@/views/private/components/drawer-item';
 import DrawerCollection from '@/views/private/components/drawer-collection';
 import { Filter, Field } from '@/types';
-import { Header, Sort } from '@/components/v-table/types';
 import { isEqual, sortBy } from 'lodash';
 import { get } from 'lodash';
 import { unexpectedError } from '@/utils/unexpected-error';
@@ -119,14 +126,13 @@ export default defineComponent({
 			adjustFieldsForDisplays(getFieldsFromTemplate(templateWithDefaults.value), relatedCollection.value.collection)
 		);
 
-		const { tableHeaders, items, loading } = useTable();
+		const { items, loading } = usePreview();
 		const { currentlyEditing, editItem, editsAtStart, stageEdits, cancelEdit } = useEdits();
 		const { stageSelection, selectModalActive, selectionFilters } = useSelection();
 		const { sort, sortItems, sortedItems } = useSort();
 
 		return {
 			relation,
-			tableHeaders,
 			loading,
 			currentlyEditing,
 			editItem,
@@ -252,10 +258,7 @@ export default defineComponent({
 			return { relation, relatedCollection, relatedPrimaryKeyField };
 		}
 
-		function useTable() {
-			// Using a ref for the table headers here means that the table itself can update the
-			// values if it needs to. This allows the user to manually resize the columns for example
-			const tableHeaders = ref<Header[]>([]);
+		function usePreview() {
 			const loading = ref(false);
 			const items = ref<Record<string, any>[]>([]);
 
@@ -320,41 +323,7 @@ export default defineComponent({
 				{ immediate: true }
 			);
 
-			// Seeing we don't care about saving those tableHeaders, we can reset it whenever the
-			// fields prop changes (most likely when we're navigating to a different o2m context)
-			watch(
-				() => fields.value,
-				() => {
-					tableHeaders.value = (fields.value.length > 0 ? fields.value : getDefaultFields())
-						.map((fieldKey) => {
-							const field = fieldsStore.getField(relatedCollection.value.collection, fieldKey);
-
-							if (!field) return null;
-
-							const header: Header = {
-								text: field.name,
-								value: fieldKey,
-								align: 'left',
-								sortable: true,
-								width: null,
-								field: {
-									display: field.meta?.display,
-									displayOptions: field.meta?.display_options,
-									interface: field.meta?.interface,
-									interfaceOptions: field.meta?.options,
-									type: field.type,
-									field: field.field,
-								},
-							};
-
-							return header;
-						})
-						.filter((h) => h) as Header[];
-				},
-				{ immediate: true }
-			);
-
-			return { tableHeaders, items, loading };
+			return { items, loading };
 		}
 
 		function useEdits() {
@@ -462,7 +431,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-
 .v-list {
 	--v-list-padding: 0 0 4px;
 }