Showing loader in nextJs

you need to wrap the children in root layout with a built in Suspense component. Example:

<Suspense fallback={<p>Loading..</p>}>
{children}
</Suspense>

Another way is to create a loading component in project root with the follow code

import React from 'react'

const loading = () => {
  return (
    <div><span className="loading loading-spinner text-success"></span></div>
  )
}

export default loading

also to use loading spinner you need to have tailwind and daisy-ui installed to install daisy ui use below command

npm i -D daisyui@latest