🪼

Rails 8.0で削除ボタンをクリックした時にボタンをdisabledにしてスピナーを表示

に公開
Rails
Ruby
Hotwire
tech

はじめに

Rails 7.0からHotwireがデフォルトになり、この記事がとても参考になりました。

https://qiita.com/jnchito/items/5c41a7031404c313da1f

この記事のおかげでRailsでボタンクリック時にボタンをdisabledにしてスピナーを表示することもできました。

削除ボタンにスピナーを表示するときの実装で少し時間がかかったので、その時のメモを書いておきます。

スタイルシート

app/assets/stylesheets/style.css
button .show-when-disabled {
  display: none;
}
button[disabled] .show-when-disabled {
  display: initial;
}

button .show-when-enabled {
  display: initial;
}
button[disabled] .show-when-enabled {
  display: none;
}

削除ボタン

スピナーを適用する前は削除ボタンをlink_toで作成していました。

<%= link_to destroy_all_records_path,
      data: { turbo_method: :delete, turbo_confirm: t("confirmations.delete") },
      class: "btn btn-danger col-6 offset-3" do %>
  <i class="bi bi-trash"></i>
  <%= t("views.delete") %>
<% end %>

これをbutton_toに変更しました。link_toではturbo_method: :deleteの指定でDELETEメソッドが発行されていたのですが、button_toだとPOSTメソッドが発行されるようになってしまいます。

method: :deleteを追加して、button_toでもDELETEメソッドが発行されるようになりました。turbo_method: :deleteは削除しておきます。

<%= button_to destroy_all_records_path,
      method: :delete, data: { turbo_confirm: t("confirmations.delete") },
      class: "btn btn-danger col-6 offset-3" do %>
  <span class="show-when-enabled">
    <i class="bi bi-trash"></i>
    <%= t("views.delete") %>
  </span>
  <span class="show-when-disabled">
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  </span>
<% end %>

おわりに

この方法で動作するようになりました。button_toでもturbo_method: :deleteを使用してほしい気もしますが、引き続き検証していきます。

Discussion