feat(KtTable): introduce loading state for singular rows

Author: Isokaeder

packages/documentation/pages/usage/components/table.vue

@@ -386,6 +386,7 @@ export default defineComponent({
 						select: rowIndex === 1,
 					},
 					id: String(row.id),
+					isLoading: rowIndex === 2,
 				}),
 				hasDragAndDrop: booleanFlags.value.hasDragAndDrop,
 				id: 'example',

packages/kotti-ui/source/kotti-table/KtTable.vue

@@ -227,6 +227,7 @@ export default defineComponent({
 							'kt-table-row--is-click-disabled': behavior.disable?.click,
 							'kt-table-row--is-interactive':
 								!behavior.disable?.click && behavior.click,
+							'kt-table-row--is-loading skeleton rectangle': behavior.isLoading,
 							'kt-table-row--is-selected': row.getIsSelected(),
 						}),
 						expandedColSpan: row.getAllCells().length,
@@ -648,8 +649,9 @@ tr.kt-table-row {
 		}
 	}
 
-	&--is-loading {
-		text-align: center;
+	&--is-loading.rectangle {
+		display: table-row;
+		height: unset;
 	}
 
 	&--is-selected {

packages/kotti-ui/source/kotti-table/table/hooks.ts

@@ -135,6 +135,7 @@ export const paramsSchema = z
 						})
 						.optional(),
 					id: z.string(),
+					isLoading: z.boolean().optional(),
 				}),
 			),
 		hasDragAndDrop: z.boolean().default(false),

packages/kotti-ui/source/kotti-table/table/types.ts

@@ -51,6 +51,7 @@ export type GetRowBehavior<
 		select: boolean
 	}
 	id: string
+	isLoading?: boolean
 }
 
 export module KottiTable {