wds
componentloading-swapsource: ok · hit
Loading Swap
Swaps content with a loading spinner without layout shift.
npx shadcn add "https://wds-shadcn-registry.netlify.app/r/loading-swap.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/14/2026, 2:21:06 PM
src/registry/new-york/items/loading-swap/components/loading-swap.tsx
import { cn } from "@/lib/utils"
import { Loader2Icon } from "lucide-react"
import type { ReactNode } from "react"
export function LoadingSwap({
isLoading,
children,
className,
}: {
isLoading: boolean
children: ReactNode
className?: string
}) {
return (
<div className="grid grid-cols-1 items-center justify-items-center">
<div
className={cn(
"col-start-1 col-end-2 row-start-1 row-end-2 w-full",
isLoading ? "invisible" : "visible",
className,
)}
>
{children}
</div>
<div
className={cn(
"col-start-1 col-end-2 row-start-1 row-end-2",
isLoading ? "visible" : "invisible",
className,
)}
>
<Loader2Icon className="animate-spin" />
</div>
</div>
)
}