i have a problem with checkbox. Checking animation isnt smooth as expect. When i click on checkbox its checked then unchecked and checked again. I dont know how can i fix that. i am using sveltekit (svelte 5) and picocss. Can u help me please? Thanks
//+page.svelte<script> import { flip } from 'svelte/animate' import { fade } from 'svelte/transition' import { enhance } from '$app/forms' import { states } from '$lib/states.svelte' let { data, form } = $props() const allUsers = $derived(JSON.parse(data.allUsers)) const currentUser = $derived(JSON.parse(data.user)) let searchValue = $state('') const filteredUsers = $derived( allUsers.filter( (user) => user.username.includes(searchValue.toLowerCase()) && user._id !== currentUser._id ) ) $effect(() => { console.log(allUsers) })</script><div class="container"><nav aria-label="breadcrumb"><ul><li><a href="/app/administration">administration</a></li><li>user access</li></ul></nav><h3>user access</h3><div class="search-bar"><input class="search" type="search" name="search" bind:value={searchValue} placeholder="search" /> {#if searchValue.length > 0} {#if searchValue.length > 0}<a href="#clear" class="clear-button" onclick={(e) => { e.preventDefault() searchValue = '' }}>X</a> {/if} {/if} {#if searchValue.length > 0}<p> searching "{searchValue}"</p> {/if}</div> {#if filteredUsers.length > 0}<div class="header"><p class="title">user</p><p class="admin">admin</p></div><ul> {#each filteredUsers as user (user._id)}<li transition:fade animate:flip={{ duration: 300 }}><form action="?/admin" method="post" onchange={(e) => { e.currentTarget.requestSubmit() }} use:enhance={() => { states.showLoadingSpinner = true return async ({ update }) => { await update() states.showLoadingSpinner = false } }}><label for="admin" class="user-row"><p class="user"> {user.username}</p><input type="checkbox" name="admin" id="admin" role="switch" bind:checked={user.admin} /></label><input type="hidden" name="id" value={user._id} /></form></li> {/each}</ul> {:else}<p class="centered-paragraph">No users with this name</p> {/if}</div>//+page.server.jsimport { User } from '$db/models/User'export const actions = { admin: async ({ request }) => { const data = await request.formData() const admin = data.get('admin') const _id = data.get('id') console.log(admin) let value if (admin === 'on') { value = true } else { value = false } try { const result = await User.findOneAndUpdate( { _id }, { $set: { admin: value } } ) } catch (error) { console.log(error) return fail(400, { success: false, type: 'error', message: 'something went wrong' }) } return { success: true, type: 'success', message: 'user role has been updated' } }}i want the default value of checkbox be from Db (user.admin) and on click update user in db.i used e.currentTarget.requestSubmit() to submit a form on change. It works and update db but the checkbox animation makes checked/unchecked/checked