diff --git a/components/story/create/storyForm.vue b/components/story/create/storyForm.vue
index 749b356..ce36ef8 100644
--- a/components/story/create/storyForm.vue
+++ b/components/story/create/storyForm.vue
@@ -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"