wds
componentloading-swap-experimentalsource: ok · hit
Loading Swap Experimental
Swaps content with a loading spinner without layout shift. (Includes experimental support for all Shadcn icon libraries)
npx shadcn add "https://wds-shadcn-registry.netlify.app/r/loading-swap-experimental.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/8/2026, 12:20:34 PM
src/registry/experimental/items/loading-swap/components/loading-swap.tsx
import { IconPlaceholder } from "@/components/registry-helpers/icon-placeholder"
import { cn } from "@/lib/utils"
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,
)}
>
<IconPlaceholder
lucide="Loader2Icon"
tabler="IconLoader2"
hugeicons="Loading03Icon"
phosphor="CircleNotchIcon"
remixicon="RiLoader4Line"
className="animate-spin"
/>
</div>
</div>
)
}