Next.js Discord

Discord Forum

Spinners not loading in loading.tsx

Answered
Broad-snouted Caiman posted this in #help-forum
Open in Discord
Broad-snouted CaimanOP
NextJs Version: 14.2.5

Hello! So I am trying to add a spinner to the loading.tsx while the server component handles some basic data fetching.

And the loading page does render without an issue but for some reason the spinners I have tried using do not animate.

I have tried react-spinners, react-loader-spinner and even @nextui-org/spinner

The spinners show but do not animate and I have tried looking all over Google for a proper approach but haven’t had luck so far.

Would someone be able to point me in the right direction?

Thank you!
Answered by Sun bear
if you are using tailwindcss you can install an icon library and add a css animation for spinning like this:

import { Loader } from "lucide-react"

export default function Loading() {
  return (
    <Loader className="animate-spin" />
  )
}


I am using [lucide react](https://lucide.dev/icons/) icon package which is imo the best one, but you can check out the alternatives as well.
View full answer

4 Replies

Sun bear
if you are using tailwindcss you can install an icon library and add a css animation for spinning like this:

import { Loader } from "lucide-react"

export default function Loading() {
  return (
    <Loader className="animate-spin" />
  )
}


I am using [lucide react](https://lucide.dev/icons/) icon package which is imo the best one, but you can check out the alternatives as well.
Answer
Sun bear
there is no need of installing a component library such as nextui just for the spinner
Broad-snouted CaimanOP
Oh okay! Awesome! Yeah it was a bit over the top due to rushing myself a bit on trying to figure it out but this is great! Already using react-icons library but will definitley look into this one as well

Thank you @Sun bear for the solution
Sun bear
You're welcome. Glad it worked out.