Skip to main content


Hooks that make it easy to manage the loading state of a Promise.

useLoading returns a Tuple of [isLoading: boolean, startLoading: (promise: Promise) => Promise].

  • The first value, isLoading, initially starts with false.
  • The second value, startLoading, is a function that returns a promise.
    • When startLoading is executed and the promise given as an argument is resolved, isLoading becomes true.
    • If that Promise then resolves, isLoading becomes false again.

See the example below to see exactly how to use useLoading.

const [isLoading, startLoading] = useLoading();


function postConfirmation(data: Data): Promise<Result> {
return post.e2e<Result>('/api/sample/confirm', data);

function ConfirmButton({ data }: { data: Data }) {
const [loading, startTransition] = useLoading();

const handleSubmit = useCallback(() => {
const result = await startTransition(postConfirmation(data));
}, [call]);

return (
<Button loading={loading} onClick={handleSubmit}>