在 sveltekit 中实现在操作期间触发的加载旋转器

Question

我有一个简单的表格，其中包含电子邮件、密码和确认密码。我用行动来处理这个问题。我想实现一个将触发以下操作的微调器

1. 检查用户当前是否存在于数据库中
2. 如果没有，则继续注册

我正在使用口袋底座

以下是我的行动。

import { superValidate } from 'sveltekit-superforms/server';
import { redirect } from '@sveltejs/kit';
import { fail } from '@sveltejs/kit';

import { loginSchema } from '$lib/schema/zodschema';
import { ClientResponseError } from 'pocketbase';

export const load = async () => {
    const form = await superValidate(loginSchema);
    return { form };
};

export const actions = {
    default: async ({ locals, request }) => {
        const form = await superValidate(request, loginSchema);


        try {

            const { email } = form.data
            const records = await locals.pb.collection('test').getFullList();
            const userRecords = records.filter(value => value.email === form.data.email);

            if (userRecords.length > 0) {

                const existingUser = userRecords[0]

                if (existingUser && existingUser.verified) {
                    return {

                        accountCreated: false,
                        message: 'The user records exists. Proceed to login instead',
                        isVerified: true,

                    }
                } else {


                    return {

                        accountCreated: false,
                        message: 'The user record exists. You have to verify to access',
                        isVerified: false,


                    }
                }
            } else {
                await locals.pb.collection('test').create(form.data);



                return {

                    accountCreated: true,
                    message: 'The user record is successfully created',
                    isVerified: false,
                }
            }



        } catch (error) {
            // Handle the error

            if (error instanceof ClientResponseError) {
                return {
                    error: error.message,
                    isLoading: false
                }
            }
        }
    }
};

在上面，我可以设置一个布尔值，例如

let isLoading = true

然后在不同阶段设置为false。但问题是如何访问客户端中的 isLoading 状态（初始状态和更新状态）。

我尝试了存储，后来发现存储不能用于在客户端和服务器之间共享状态。

有没有其他方法可以实现这一目标？

谢谢

Answer 1

我并不完全清楚，但您似乎正在尝试使用 Sveltekit 表单操作。另外，我不清楚为什么加载器需要在服务器加载期间更改。

我建议您在请求开始和结束时使用渐进增强在客户端中使用加载布尔值：

<script>
    import { enhance } from '$app/forms';

    /** @type {import('./$types').PageData} */
    export let data;

    let formLoading = false;
</script>

...
{#if formLoading}
    Loading...
{/if}
...
<form action="?/..." method="post" use:enhance={() => {
    formLoading = true;
    return async ({ update }) => {
        formLoading = false;
        update();
    };
}}>
    <button>SUBMIT</button>
</form>

相关文档： https://kit.svelte.dev/docs/form-actions#progressive-enhancement