Loading State

Detailed Explanation

Loading State is what your Web Application shows while waiting for data to arrive or an operation to complete. It's the spinner, the "Loading..." text, or the disabled button that tells the user "hang on, something is happening."

In React Router, loaders fetch data before the Component renders, so the page itself doesn't need a loading state — the data is already there. However, you still need loading states for:

Form submissions: When a user clicks Submit, show that it's processing:

import { useNavigation } from 'react-router-dom';

function CreatePost() {
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';
  return (
    <button disabled={isSubmitting}>
      {isSubmitting ? 'Posting...' : 'Create Post'}
    </button>
  );
}

Deferred data: For slow queries, React Router's <Await> component lets you show a loading skeleton while data streams in.

Without loading states, users don't know if their click worked. They might click again (submitting the form twice) or think the app is broken. Good loading states prevent duplicate submissions, reduce confusion, and make your app feel responsive.

The useNavigation Hook from React Router tells you the current navigation state: idle (nothing happening), loading (navigating to a new page), or submitting (a form is being processed). Use these states to toggle your UI.