실제 서비스에서는 방대한 양의 데이터베이스에서 레코드를 찾고 클라이언트 측을 필터링 하는 것일 수 있다.

로딩 indicator가 없다면, 검색이 다소 느리다고 느껴진다.

데이터베이스 검색을 더 빠르게 한다 하더라도 사용자의 네트워크 지연 시간을 제어할 수 없다.

따라서 더 나은 UX를 위해, 검색을 위한 즉각적인 UI 피드백을 추가해보자.

useNavigation 을 이용한다.

Add the search spinner

// 📄src/route/root.jsx

// existing code

export default function Root() {
  const { contacts, q } = useLoaderData();
  const navigation = useNavigation();
  const submit = useSubmit();

  const searching =
    navigation.location &&
    new URLSearchParams(navigation.location.search).has(
      "q"
    );

  useEffect(() => {
    document.getElementById("q").value = q;
  }, [q]);

  return (
    <>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        <div>
          <Form id="search-form" role="search">
            <input
              id="q"
              className={searching ? "loading" : ""}
              // existing code
            />
            <div
              id="search-spinner"
              aria-hidden
              hidden={!searching}
            />
            {/* existing code */}
          </Form>
          {/* existing code */}
        </div>
        {/* existing code */}
      </div>
      {/* existing code */}
    </>
  );
}

navigation.location 은 앱이 새 URL에 이동하고 데이터를 로딩할때 표시된다.

그런 다음 pending navigation이 더 이상 없다면 사라진다.

출처 : 리액트 라우터 공식 홈페이지➡️