How to create Loader screen for route change in remix.js (remix.run)

How to Create a Loader Screen When Route Changes in Remix.run

Loading screens enhance user experience by providing visual feedback during route changes in web applications. In this article, we'll guide you through the process of implementing a loader screen in your Remix.run application. By following these steps, you'll be able to create a seamless and engaging navigation experience for your users.

Step 1: Set Up Your Remix Project

First, ensure you have a Remix project set up. If you don't have one, you can create a new Remix project by following these steps:

Install the Remix CLI:

npx create-remix@latest directory_name

Navigate to your project directory and install dependencies:

cd directory_name
npm install

Step 2: Create a Loader Component

// components/Loader.jsx
import React from 'react';

export default Loader = () => {
  return (
    <div className="loader">
      <div className="spinner"></div>
      <style jsx>{`
        .loader {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(255, 255, 255, 0.8);
          z-index: 1000;
        }
        .spinner {
          border: 4px solid rgba(0, 0, 0, 0.1);
          width: 36px;
          height: 36px;
          border-radius: 50%;
          border-left-color: #09f;
          animation: spin 1s ease infinite;
        }
        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      `}</style>
    </div>
  );
};

This component displays a spinner centered on the screen with a semi-transparent background.
you can always go and check cool spinners' design here https://cssloaders.github.io/

Step 3: Manage Route Change State

To control when the loader appears, you'll need to manage the route change state. Remix doesn't provide built-in route change events, so you'll need to use Remix's useNavigation hook.

In your root.jsx (or app.jsx depending on your project structure),below logic to show the loader during route change:

// root.jsx (or app.jsx)

import { 
useNavigation } from "@remix-run/react";
import Loader from './components/Loader';

const App = () => {
  const navigation = useNavigation();
  const isLoading = navigation.state === "loading";

  return (
    <>
      {isLoading && <Loader />}
      {/* Your routes and other components go here */}
    </>
  );
};

export default App;

In this setup, the useNavigation hook provides information about the current navigation state. When the state is loading, the loader is shown, and when it transitions to idle, the loader is hidden.

Step 4: Style Your Loader

Finally, ensure your loader is styled appropriately. You can customize the CSS in the Loader.jsx file to match your application's design.

Conclusion

Implementing a loader screen for route changes in Remix.run enhances user experience by providing visual feedback during navigation. By following the steps outlined in this article, you can easily add a loader to your Remix application, ensuring a smooth and engaging experience for your users.

By leveraging Remix's useNavigation hook, you can effectively manage the display of your loader component, making your application feel more responsive and polished. Happy coding!