coai/app/src/spinner.tsx

import { NProgress } from "@tanem/react-nprogress";
import { useDispatch, useSelector } from "react-redux";
import { decreaseTask, increaseTask, selectIsTasking } from "@/store/auth.ts";
import { useEffect } from "react";
import {
  closeSpinnerType,
  openSpinnerType,
  spinnerEvent,
} from "@/events/spinner.ts";

function Spinner() {
  const dispatch = useDispatch();

  useEffect(() => {
    spinnerEvent.bind((event) => {
      switch (event.type) {
        case openSpinnerType:
          dispatch(increaseTask(event.id));
          break;
        case closeSpinnerType:
          dispatch(decreaseTask(event.id));
          break;
      }
    });
  }, []);

  const isAnimating = useSelector(selectIsTasking);

  return (
    <NProgress isAnimating={isAnimating}>
      {({ animationDuration, isFinished, progress }) => (
        <div
          className={`spinner`}
          style={{
            opacity: isFinished ? 0 : 1,
            transitionDuration: `${animationDuration}ms`,
            width: `${progress * 100}vw`,
          }}
        ></div>
      )}
    </NProgress>
  );
}

export default Spinner;