Name: SvelteKit + DaisyUI에서 form의 저장 버튼이 2번 눌리지 않게하기
Rating: 3.4 (9141 reviews)
Author: __aa3e4bc832ba7032bfa3

SvelteKit + DaisyUI에서 form의 저장 버튼이 2번 눌리지 않게하기

Beaver Bridge - Aug 14 '23 -

- Dev Community

DaisyUI의 버튼에는 loading 이 있다. https://daisyui.com/components/button/

그걸 사용하면 저장버튼이 두 번 눌리지 않게 할 수 있다.

<script>
import { applyAction, enhance } from "$app/forms";
import { goto, invalidateAll } from "$app/navigation";
</script>

<form
  use:enhance={({ form, data, action, cancel, submitter }) => {
  submitter.classList.add("loading");

  try{ 
    // todo
  } catch(e){
    submitter.classList.remove("loading");
    cancel();
  }

  return async ({ result, update }) => {
    if (result.type === "success") {
      goto("/list");
    } else {
      submitter.classList.remove("loading");
      await invalidateAll();
    }
    applyAction(result);
  };
}}>