refactor(components): add loading spinner to client-only fallback slot
				
					
				
			This commit is contained in:
		
							parent
							
								
									7b8a089d95
								
							
						
					
					
						commit
						dcda8143f9
					
				| @ -3,6 +3,7 @@ | ||||
| 	import { v4 } from "uuid"; | ||||
| 	import lmove from "lodash-move"; | ||||
| 	import { Field, FieldArray, useForm, useFieldArray } from "vee-validate"; | ||||
| 	import { ASpin } from "#components"; | ||||
| 	import { storySchema } from "@client/storyFormSchema"; | ||||
| 	import { FormStory, defaultChapter } from "@client/types/form/story"; | ||||
| 	import { autoEdit, autoSave, debouncedAutoEdit, debouncedAutoSave } from "@client/utils"; | ||||
| @ -112,7 +113,7 @@ | ||||
| 		<a-divider /> | ||||
| 		<!-- <test1/> --> | ||||
| 		<field-array name="chapters" v-slot="{ fields, push, remove, move }"> | ||||
| 			<client-only> | ||||
| 			<client-only :fallback="h(ASpin)"> | ||||
| 				<div> | ||||
| 					<div v-for="(element, index) in data.chapters"> | ||||
| 						<client-only> | ||||
| @ -151,6 +152,11 @@ | ||||
| 				</div> | ||||
| 			</client-only> | ||||
| 			<client-only> | ||||
| 				<template #fallback> | ||||
| 					<div style="display: flex; justify-content: center"> | ||||
| 						<a-spin /> | ||||
| 					</div> | ||||
| 				</template> | ||||
| 				<draggable | ||||
| 					:component-data="{ type: 'transtion-group', 'data-testid': 'storyform.chapters' }" | ||||
| 					@start="drag = true" | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user