相談部屋一覧のローディング中にプレースホルダを表示

[ot0m1]

ref: #4091

要件

相談部屋一覧のローディング中に、日報一覧のローディング中と同様にプレースホルダーを表示させる。

画面イメージ

確認方法

1. feature/show-placeholders-while-loading-consultation-room-list ブランチをローカルに持ってくる（参考：https://qiita.com/great084/items/ad74dd064a2c2bc47cff ）

git fetch origin pull/{このプルリクエストのid}/head:{任意のブランチ名}
git checkout {上記でfetchした任意のブランチ名}

2. メンター（komagata or machida）のアカウントでログイン
3. 相談部屋一覧（ http://localhost:3000/talks ）にアクセスしてローディング中にプレースホルダーが表示されていることを確認

[ot0m1]

@Saki-htr
レビューお願いいたします🙏

[Saki-htr]

@ot0m1 さん
お疲れさまです〜! お待たせしてすみません🙏

動作確認したところ、私の環境では、以下の動画のように、

1. 相談部屋をクリックすると「ロード中」と表示される
2. その後プレースホルダが表示されず、相談部屋一覧が表示される

となりました。

ご確認いただきたい箇所が2点あります🙏

1点目

プレースホルダが表示されていないようですので、ご確認いただけましたら幸いです〜。

2点目

少し気になったのですが、この「ロード中」は画面に表示するものなのでしょうか？？
[相談部屋] 相談部屋一覧のローディング中にプレースホルダを表示したい。 · Issue #4091 · fjordllc/bootcampでmachidaさんが、「日報一覧の読込中と同じものを表示するようにお願いします」と仰っていて、日報一覧(http://localhost:3000/reports) では、「ロード中」と表示されておらず、プレースホルダーのみ表示されるので、気になりました〜
もし「ロード中」を表示しないようでしたら、そちらも合わせてご確認いただけましたら幸いです🙏
よろしくお願いいたします🙇‍♀️

[ot0m1]

@Saki-htr
ブランチを取り込んでいただいた上でプレースホルダが表示されずロード中という表示がされるようでしたら、Vueなどのキャシュ？が残っている可能性があります。
僕もこのブランチ対応中に行った変更が反映されずに困ったことがありました。
以下を試していただけますでしょうか。

• Chrome のゲストモードなどでローカルホストに接続する（ブラウザのキャッシュではなさそうですが一応）
• app/javascript/talks.vue の未返信の相談部屋はありませんの文字を一旦適当な文字列に変更してファイルを保存する
  • プレースホルダを確認できたら変更した文字は戻す

[Saki-htr]

@ot0m1 さん
お疲れさまです。
動作確認を無事に行えました。
最初私の方できちんと動作確認ができておらず、申し訳ありませんでした🙏💦

コードと動作確認ともにLGTMなのですが、
今の状態でfeature/show-placeholders-while-loading-consultation-room-listにチェックアウトしてrailsを起動しようとすると、sorcery-jwtというgem関連のエラーが起きてしまいます。
こちらのエラーはsorcery-jwtをアップデート by komagata · Pull Request #4116 · fjordllc/bootcampで対応済で、すでにmainにマージされているため、mainを取り込んでいただければこのエラーは解消されます。

お手数をおかけして申し訳ないのですが、最新のmainを取り込んでもう一度pushしていただけましたら幸いです。
よろしくお願いいたします🙏

[ot0m1]

@Saki-htr ご確認ありがとうございました！最新の main を取り込んでおりますので再度レビューお願いいたします。

[Saki-htr]

@ot0m1 さん
mainを取り込んでくださって、ありがとうございます!
ただいま確認したところ、大丈夫でした。
ReviewのステータスをApprove changesにしましたので、よろしくお願いいたします〜:pray:

[ot0m1]

@Saki-htr レビューありがとうございました！
@komagata レビューお願いいたします。

[komagata]

確認しました、OKですー🙆‍♂️