NextJs 13 or 14 Server action progress on client

When using NextJs 13 or 14, is there a way to inform the client about a status during a server action? Let's assume, I have a server action, which performs an activity on 1000 database records, and I would like to show on the client the progress of this activity.

You could put a loading spinner before the you receive the response. Addtionally, you can use alerts or toasts before sending the action

You can implement a loader similar to progressbar by simply using a package called nextjs-toploader.

install it

npm i nextjs-toploader

add it inside your rootlayout

import NextTopLoader from 'nextjs-toploader';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}

You can also customize the loader

<NextTopLoader
  color="#2299DD"
  initialPosition={0.08}
  crawlSpeed={200}
  height={3}
  crawl={true}
  showSpinner={true}
  easing="ease"
  speed={200}
  shadow="0 0 10px #2299DD,0 0 5px #2299DD"
  template='<div class="bar" role="bar"><div class="peg"></div></div> 
  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  zIndex={1600}
  showAtBottom={false}
/>