Remix 양식에 애니메이션 상태 추가

이제 우리는 form displaying error 을 얻었으므로 여전히 약간의 단점이 있습니다.

양식을 로드하는 데 시간이 꽤 걸린다고 가정해 보겠습니다. 일부 사용자는 참을성이 없어 제출 버튼을 여러 번 클릭하거나 입력을 변경할 수도 있습니다.

액션에 "수면"을 도입하여 이를 모방해 봅시다.

export const action = async ({ request }) => {
  // Sleep...
  await new Promise((r) => setTimeout(r, 1000));

  // All the other stuff
};

이제 코드는 항상 1000밀리초 동안 대기합니다.

Remix useTransition 후크 사용

우리가 이미 사용한 후크 외에도 Remix는 useTransition 후크를 제공합니다.
이 후크를 사용하여 양식이 무언가로 바쁘다는 사실에 연결할 수 있습니다.

우리의 경우 모든 양식 필드를 비활성화하고 버튼의 텍스트를 변경하여 사용자가 어떤 일이 일어나고 있음을 알 수 있도록 합니다.

먼저 렌더 내부에 후크를 로드합니다.

import { useTransition } from '@remix-run/react';

export default function NewPost() {
  const transition = useTransition();

  // Our render
}

그런 다음 렌더링 부분에 대해 양식 요소를 fieldset 내부에 래핑할 수 있으므로 모든 요소를 ​​빠르게 비활성화할 수 있습니다.

<Form method='post'>
  <fieldset disabled={transition.state === 'submitting'}>
    // Our form fields
  </fieldset>
</Form>

우리가 전환 상태에 연결되는 것을 볼 수 있으며 제출 중이면 양식을 비활성화합니다.

다음으로 버튼을 변경하여 작업도 반영할 수 있습니다.

<button
  type='submit'
  className='rounded bg-blue-500 py-2 px-4 text-white hover:bg blue-600 focus:bg-blue-400 disabled:bg-blue-300'
>
  {transition.state === 'submitting' ? 'Creating...' : 'Create post'}
</button>

이는 상태를 사용하여 표시할 텍스트를 결정하는 것과 동일한 개념입니다.

코드를 실행하면 다음과 같은 결과를 얻어야 합니다.



여기에서 완성된 코드 샘플을 찾을 수도 있습니다GitHub branch.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나