Menu
Always show a loading spinner in a button when it triggers an async action (submit, save, delete, etc.).
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
When changing API routes, auth, or env-dependent behavior, add or update the corresponding integration tests and keep the test file layout consistent.
When adding or changing files under infra/k8s/ or sync targets for k8s, know what Argo CD syncs and remind the user to push to Git so the cluster can sync.
Keeps tools/generate-data seeders and docs in sync when main or management DB schema or ORM entities change. Use when adding or changing tables/entities in packages/orm, packages/management-orm, or infra database migrations.
When changing DB schema or permission dimensions, consider predefined roles and bucket_role / role-related code.
Use when adding or changing environment variables, infra/env/classification YAML, scripts/env-classification, K8s env render, or local env generation.
Common patterns for the Boilerplate HTTP API (Express)
| name | button-loading-async |
| description | Always show a loading spinner in a button when it triggers an async action (submit, save, delete, etc.). |
| version | 1.1.0 |
When to use: Whenever you add or change a button that triggers an async request (form submit, save, delete, invite, copy, etc.).
Any button that starts an async operation (API call, mutation, clipboard write, etc.) must:
const [loading, setLoading] = useState(false); and set true at the start of the request, false in finally (or on success/error).loading prop on Button from @boilerplate/ui: <Button ... loading={loading}>. The Button shows an inline spinner and is disabled while loading is true.disabled={loading} explicitly or rely on Button’s built-in behavior (Button already sets disabled when loading is true). For secondary actions (e.g. Cancel), pass disabled={loading} so they are disabled during the primary action.loading={...} to the Button.disabled={loading} should be passed as loading={loading} so the spinner appears.loading={confirmLoading} (or equivalent) to the confirm Button so the delete button shows a spinner.