Show A Progress Bar When A React Transition Is Running - react-transition-progress

Description:

A tiny React component that displays a progress bar while a React transition is in progress. Based on framer-motion, an open source, production-ready animation and gesture library for React.

How to use it:

1. Install and import.

# NPM
$ npm install react-transition-progress framer-motion

2. Basic usage.

"use client";
import { useState, startTransition } from "react";
import { useProgress } from "react-transition-progress";
export default function MyComponent() {
  const startProgress = useProgress();
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>Current count: {count}</h1>
      <button
        onClick={() => {
          startTransition(async () => {
            startProgress();
            // Introduces artificial slowdown
            await new Promise((resolve) => setTimeout(resolve, 2000));
            setCount((count) => count + 1);
          });
        }}
      >
        Trigger transition
      </button>
    </>
  );
}