How to add Spinner at specific route?

Question

I get this code in question:nextjs getServerSideProps show loading

import Router from "next/router";

export default function App({ Component, pageProps }) {
  const [loading, setLoading] = React.useState(false);
  React.useEffect(() => {
    const start = () => {
      console.log("start");
      setLoading(true);
    };
    const end = () => {
      console.log("findished");
      setLoading(false);
    };
    Router.events.on("routeChangeStart", start);
    Router.events.on("routeChangeComplete", end);
    Router.events.on("routeChangeError", end);
    return () => {
      Router.events.off("routeChangeStart", start);
      Router.events.off("routeChangeComplete", end);
      Router.events.off("routeChangeError", end);
    };
  }, []);
  return (
    <>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <Component {...pageProps} />
      )}
    </>
  );
}

It work for me, but with all route, I just want to work with some route, and route have dynamic query, How can I do it?

Nick Vu · Accepted Answer · 2022-04-15T04:26:07.717

First of all, you need to define a list of routes that you don't want to have a loading state. For example

//`/details/` can be a dynamic route like `/details/1`, `/details/2`, etc.
const EXCEPTED_ROUTES = ['/details/'] //routes based on definitions

And then you can do it with URL param in routeChangeStart event

const start = (url) => {
   const isURLMatched = EXCEPTED_ROUTES.some(exceptedRoute => url.startsWith(exceptedRoute))
   if(isURLMatched) { //the condition here is your choice
      return //should not set loading state
   }
   console.log("start");
   setLoading(true);
};

How to add Spinner at specific route?

1 Answers1