LoadingInput

An input placeholder with a loading indicator. Renders the same outer shape as a <TextInput> to avoid layout jumps when swapped with the real input.

Installation

pnpm dlx shadcn@latest add @shadmin/loading-input

Usage

Use <LoadingInput> while you are fetching the data needed by a form input (for instance, the choices of a select), so the form keeps its layout stable:

import { LoadingInput, TextInput } from "@/components/admin";
 
const TitleInput = () => {
  const { isPending } = useGetSomeData();
  if (isPending) {
    return <LoadingInput label="Title" />;
  }
  return <TextInput source="title" />;
};

The input is always disabled. A spinner appears inside the input once timeout (default 1000ms) has elapsed — this avoids flashing a spinner on fast loads.

Props

Prop	Required	Type	Default	Description
`className`	Optional	`string`	-	CSS classes applied to the wrapper
`fullWidth`	Optional	`boolean`	`false`	Stretch the input to fill its container
`helperText`	Optional	`ReactNode`	-	Help text rendered below the input
`label`	Optional	`ReactNode`	-	Label rendered above the input
`timeout`	Optional	`number`	`1000`	Milliseconds to wait before showing the spinner

`timeout`

Delay (in ms) before the loading spinner appears inside the input. Use a longer timeout to avoid flashing the spinner on very fast loads, or 0 to show it immediately.

<LoadingInput label="Title" timeout={500} />

`helperText`

Renders below the input. Strings are translated via the i18n provider.

<LoadingInput label="Title" helperText="Fetching options…" />