fix: メッセージスクロール周りの改修

[yas-ako]

概要

• refactor: useMessageScroller を導入してメッセージスクロール周りのロジックを統合・リファクタリング

• fix: 初回ロード時にスクロール位置が末尾からわずかにズレる問題を修正
• fix: WebKit 環境で画像サイズが小さく表示されていた問題を修正
• fix: コードブロックが含まれる場合もメッセージの高さを監視する
• fix: ResizeObserver の登録を待ってから追加の要素を描画する

• feat: 初回ロード時にスケルトンを表示する
• feat: スクロール速度に応じてメッセージを読み込むまでの閾値を動的に調整する

なぜこの PR を入れたいのか

• closes: 1画面に読み込み済みの投稿が全て収まるとき、追加で過去の投稿を読み込めない #4162
• closes: チャンネルの投稿を読み込んだ時にちょっと上にずれる #4297
• closes: より古いメッセージを新たに読み込んだとき、スクロール位置が下にずれてしまう #4976
• closes: 無限スクロールを、メッセージの先頭を読み込む前に行えるようにしてほしい #4985
• closes: 縦方向のオーバースクロールを殺して欲しい #4986

PR を出す前の確認事項

• （機能の追加なら）追加することの合意がチームで取れている
  • 取れていない場合はチェックを外して PR にすれば OK
• 動作確認ができている
• 自分で一度コードを眺めて自分的に問題はなさそう

[github-actions]

Preview (prod) → https://5004-prod.traq-preview.trapti.tech/
Preview (dev) → https://5004-dev.traq-preview.trapti.tech/

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 62.64%. Comparing base (86d1ed2) to head (54c4ec0).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5004      +/-   ##
==========================================
- Coverage   62.77%   62.64%   -0.13%     
==========================================
  Files         108      108              
  Lines        3097     3100       +3     
  Branches      630      630              
==========================================
- Hits         1944     1942       -2     
- Misses       1040     1048       +8     
+ Partials      113      110       -3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4a9d11ad-200e-42dd-9288-5d33bb1b18d5

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/message-scroller-layout-shift

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}