From dcda8143f91991450b6384e54a3d86f943ee24f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Sat, 16 Mar 2024 20:26:05 -0400
Subject: [PATCH] refactor(components): add loading spinner to `client-only`
 fallback slot

---
 components/story/create/storyForm.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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"