ボタンローディング表示のサイズ制御に関するTips
ボタンでローディング表示するとき、元のボタンテキストより横幅が短かったり長い内容を表示するとサイズが変わってしまう恐れがあります。
これの対処Tipsの紹介です。
元ネタ
- ボタン幅に固定値を与えない
- ローディング表示で切り替わってもボタン内要素の最長幅を維持
- TailwindCSSで表現
Wes Bosの回答（本記事の内容の90%）
（TailwindCSSではなくCSSでの解説動画でしたが学びがたくさん）
キモ
- 1行1列だけのGridを使う（Grid Areaを使う）
- opacityではなくvisibilityを使う（a11yのため）
でした。
a11y的に、opacityを使うとローディング要素に指定した文字も含めてしまい、テキストリーダーで読み上げてしまうとのこと。（button内の文字が"Save Item Saving Item"になってる！）
学び。
TailwindCSSでのチャレンジ
さて、このままではただのパクリ記事になってしまうので、学びを添えて記事とさせていただきます。
上記の内容を元ネタの通りTailwindCSSで書くにはどうしたらよいかと興味が出てやってみました。
出来た。
- ローディングのトグルにdata attributeを利用
- Grid Areaのために
[]で記述（Docs） - groupの利用
コードはこちら
TailwindCSSではcss gridの全てはutility classで用意されていないので[]を使いました。
ボタンテキストとローディング要素にarea名を指定して、visible/invisible をgroupとdataの組み合わせでトグルしてあげれば完了です。Reactであれば、data属性の値をstateで可変に与えることで実現できます。
a11yもDev Tool上で確認すると問題なさそうです。
かなり見やすいですね、気に入りました！
React Tokyoというコミュニティがスタート
宣伝です。
この度、Zustand,Jotai,Valtio,Waku作者として有名な@dai_shi さんと一緒にReact Tokyoというコミュニティをスタートしました！
東京を中心としたReactのオンライン＆オフラインコミュニティとして活動していきますので、ご興味ある方ぜひご参加ください！
まだまだ立ち上げ中なので協力してくださるメンバーも随時募集しております！
主にオンラインではDiscordを交流の場とし、 オフライン交流はConnpassを利用してイベントを開催予定です。
各種SNS含めよろしくお願いします😊
良いお年を！
Discussion