refactor(components): add loading spinner to client-only fallback slot

This commit is contained in:
parent 7b8a089d95
commit dcda8143f9
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C

@ -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"