LoaderSubmit

Bouton de soumission avec état de charge. Affiche un bouton avec un libellé au repos, et un spinner avec un texte alternatif pendant l'exécution de la mutation.

Démo en direct

Cliquez sur le bouton pour voir l'état de chargement (simulé sur 3s).

Code source complet — copier-coller

Exemple d'utilisation avec TanStack Query.

import { LoaderSubmit } from "@ramses1er/cbk-toolkit/client";
import { useCreateUser } from "../hooks/use-create-user";

function CreateUserForm() {
  const createUser = useCreateUser();

  return (
    <form onSubmit={handleSubmit}>
      {/* ... champs ... */}
      <LoaderSubmit
        isLoading={createUser.isPending}
        label="Ajouter"
        loadingLabel="Ajout en cours..."
      />
    </form>
  );
}

Props

Prop	Type	Défaut	Description
label	string	requis	Libellé du bouton à l'état initial
loadingLabel	string	requis	Texte affiché pendant le chargement
isLoading	boolean	requis	`true` = chargement en cours, `false`= état initial

Comportement

Quand isLoading est false : affiche un bouton de soumission avec label
Quand isLoading est true: affiche l'icône LoaderCircle en rotation et le texte loadingLabel
Le bouton est automatiquement disabled pendant le chargement
Idéal pour les mutations TanStack Query : passer mutation.isPending à la prop isLoading