# `Bylaw.Credo.Check.HEEx.RequireLoadingStateForSubmit`
[🔗](https://github.com/ryanzidago/bylaw/blob/v0.1.0-alpha.1/lib/bylaw/credo/check/heex/require_loading_state_for_submit.ex#L1)

## Basics

> #### This check is disabled by default. {: .neutral}
>
> [Learn how to enable it](`e:credo:config_file.html#checks`) via `.credo.exs`.

This check has a base priority of `high` and works with any version of Elixir.

## Explanation

Requires HEEx submit forms and controls to expose a loading or disabled state.

## Examples

Embedded `~H` templates are checked during normal Credo runs over Elixir
files. Standalone `.html.heex` templates require enabling
`Bylaw.Credo.Plugin.HEExSources` in Credo's `plugins` configuration.
Avoid:

      ~H"""
      <.form for={@form} phx-submit="save">
        <button type="submit">Save</button>
      </.form>
      """
Prefer:

      ~H"""
      <.form for={@form} phx-submit="save">
        <button type="submit" phx-disable-with="Saving...">Save</button>
      </.form>
      """

Custom loading conventions can be configured with `:loading_attrs` or
`:loading_class_patterns`.

## Notes

Embedded `~H` templates in `.ex` and `.exs` files are checked by Credo's normal source traversal. Standalone `.html.heex` templates are checked when `Bylaw.Credo.Plugin.HEExSources` is enabled in `.credo.exs`.

This check uses static HEEx token analysis, so it reports only patterns visible in the template source.

## Options

Configure options in `.credo.exs` with the check tuple:

```elixir
%{
  configs: [
    %{
      name: "default",
      checks: [
        {Bylaw.Credo.Check.HEEx.RequireLoadingStateForSubmit,
         [
           loading_attrs: ["phx-disable-with", "disabled"],
           loading_class_patterns: ["is-loading"]
         ]}
      ]
    }
  ]
}
```

- `:loading_attrs` - Attribute names that satisfy the loading-state requirement (default: phx-disable-with, disabled).
- `:loading_class_patterns` - Class-name substrings that satisfy the loading-state requirement (default: none).

## Usage

Add this check to Credo's `checks:` list in `.credo.exs`:

```elixir
%{
  configs: [
    %{
      name: "default",
      checks: [
        {Bylaw.Credo.Check.HEEx.RequireLoadingStateForSubmit, []}
      ]
    }
  ]
}
```

## Check-Specific Parameters

Use the following parameters to configure this check:

### `:loading_attrs`

  Attribute names that satisfy the loading-state requirement (default: phx-disable-with, disabled).

*This parameter defaults to* `["phx-disable-with", "disabled"]`.

### `:loading_class_patterns`

  Class-name substrings that satisfy the loading-state requirement (default: none).

*This parameter defaults to* `[]`.

## General Parameters

Like with all checks, [general params](`e:credo:check_params.html`) can be applied.

Parameters can be configured via the [`.credo.exs` config file](`e:credo:config_file.html`).

---

*Consult [api-reference.md](api-reference.md) for complete listing*