feat(components): add spinner component

[olekbaran]

Spinner

This PR adds a Vercel style spinner component

[vercel]

@olekbaran is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[shadcn]

@olekbaran What do you think about using an svg icon from lucide-react and animate-spin?

import { Loader2 } from "lucide-react"

<Loader2 className="animate-spin" />

[olekbaran]

@olekbaran What do you think about using an svg icon from lucide-react and animate-spin?

import { Loader2 } from "lucide-react"

<Loader2 className="animate-spin" />

@shadcn I think my loader is a better match for the components' style and more in line with your original idea. The whole library is designed with the Vercel style, so I made a loader that replicates it. But, the final decision is all yours.

[lloydrichards]

I appreciate you trying to keep the spinner in a similar style and not just adding an animate-spin to an icon (which is what i always do 😅). I think there are some things that could be improved though like removing the style prop or making the spinnerBars more composable or functional 🤷‍♂️

Though I think for more sophisticated animations like this, I would rather opt to use something like framer-motion rather then tailwind, but i'm sure a similar effect can be created regardless 👍

[lloydrichards]

Suggested change

	const spinnerBars: SpinnerBar[] = [
	{ animationDelay: -1.2, rotate: 0.0001 },
	{ animationDelay: -1.1, rotate: 30 },
	{ animationDelay: -1, rotate: 60 },
	{ animationDelay: -0.9, rotate: 90 },
	{ animationDelay: -0.8, rotate: 120 },
	{ animationDelay: -0.7, rotate: 150 },
	{ animationDelay: -0.6, rotate: 180 },
	{ animationDelay: -0.5, rotate: 210 },
	{ animationDelay: -0.4, rotate: 240 },
	{ animationDelay: -0.3, rotate: 270 },
	{ animationDelay: -0.2, rotate: 300 },
	{ animationDelay: -0.1, rotate: 330 },
	]
	const spinnerBars: SpinnerBar[] = Array.from({ length: 12 }, (_, index) => ({
	animationDelay: -1.2 + 0.1 * index,
	rotate: 30 * index
	}));

Little cleaner implementations of the spinnerBars? Could also move it outside the context of the Component to save some performance 👍

[lloydrichards]

I think this animation could be renames to something like fade-out since its only using opacity and doesnt describe any spinning animation. Will also make it more composable with other components 🤔

[lloydrichards]

thinking for a sec, something like this could work: spinner: 'rotate 1.2s infinite steps(12)', and then you can just stagger the opacity and rotate the icon 🤷‍♂️

[lloydrichards]

I'm less of a fan of mixing style and className though I understand tailwinds limitations with dynamic values. Technically you could just return the classNames in your spinnerBars explicitly (ignoring my suggestion) and then tailwind would pick it up on compile 🤔😆

  const spinnerBars: SpinnerBar[] = [
    { animationDelay: "delay-[1.2s]", rotate: "rotate-[0deg]" },
    { animationDelay: "delay-[1.1s]", rotate: "rotate-[30deg]" },
    ...

[olekbaran]

I can't do that, because delay class in tailwind stands for transition-delay CSS property, however I need animation-delay. To style this component only with className prop, I would need to add animation-delay as a custom tailwind class, but it will be so complicated to implement dynamic values for this class.

[lloydrichards]

you could use Arbitray Properties: like [animation-delay: 1.2sec] 🤷‍♂️

[lloydrichards]

but still think its better to rotate the icon using steps(12) rather then creating 12 individual animating divs

[olekbaran]

That's a good point, I'll give it a try