チャンネルリストの検索結果が多いときに一部のみ表示

[TwoSquirrels]

概要

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

close #4628

動作確認の手順

子チャンネルの多いチャンネルの子チャンネルをチャンネルリストから検索する (dev 環境だと g/, prod 環境なら gps/times/)

UI 変更部分のスクリーンショット

before

after

PR を出す前の確認事項

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

見てほしいところ・聞きたいことなど

[github-actions]

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

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 33 lines in your changes missing coverage. Please review.

Project coverage is 8.71%. Comparing base (aed3a00) to head (bcd8083).

Files with missing lines	Patch %	Lines
...in/NavigationBar/NavigationContent/ChannelsTab.vue	0.00%	33 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##           master   #4630      +/-   ##
=========================================
- Coverage    8.72%   8.71%   -0.01%     
=========================================
  Files         692     692              
  Lines       30947   30973      +26     
  Branches      536     536              
=========================================
  Hits         2699    2699              
- Misses      28241   28267      +26     
  Partials        7       7              

☔ 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.

[TwoSquirrels]

#4629 とかでチャンネルリストの検索が重いことを思い出したので

[TwoSquirrels]

「全て表示」で切る個数をどうするか問題がある。増やすと重くなるので、16 個以下がよく、とりあえず 10 にしてみた

[Takeno-hito]

これって無限スクロールの形で実装できたりしないです？

[Takeno-hito]

表示画面によっては全て表示が結構早いタイミングで出てそれだと困る、というのがあるので画面サイズに合わせて出せるようにすると良いと思います

[Takeno-hito]

isChannelListExpanded の方がいいかも List に対して expanded がかっててほしい

[cp-20]

これって無限スクロールの形で実装できたりしないです？

無限スクロールというよりは virtual scroll (仮想スクロール) が適切かなという気がします (最近コンポーネントが削除されちゃったけど (#4676)) (意図しているところは同じかもしれない)