ProjectCSSは読み込みが一瞬遅れ、チラつく

styleタグをReactで描画している

styleタグを作る前に、CurrentProjectやLayoutのStoreを作るための通信を待っている

技術的にできなくはなさそうだけど、自分は要らない

画面がチラつくほど大きくデザイン変更するUserCSSを書かないので

でも/loilo-teacher-support/休校対策！ロイロノート･スクールでオンライン授業とか見てると、高速化したくなってくる

cache storageから描画する？

実装が複雑になる

初めてアクセスした人のcache storageには入ってない

styleタグの描画のタイミングがもう少し速くなれば解決しそう

/api/code/:projectName/settings/style.css を読み込むだけなのだから

Project Storeのロード完了とかを待ってそう

ProjectCSSはUserCSSとは異なり、storeの読み込み完了を待つ必要がない

URLが確定した時点でProjectCSSのURLも確定する

現在のURLを元に投機的に読み込みを試みて良いはず

ブラウザ側でユーザーがproject memberであるかとか、projectがprivateかとか確認する必要もない

Project CSSの投機的読み込み

最速で <ProjectCSS> タグを描画する

CurrentProject storeやLayout storeの初期化を待たない

location.pathname だけ見てprojectNameを判定

<App /> コンポーネントとも分離

なるほど、root componentごと分離してしまえばよかったのか

やりやすいからこうしちゃった

<App> というコンポーネントがlayoutに合わせて子コンポーネントを切り替えるコンポーネントなので

layoutが確定する前に <ProjectCSS> をDOMに出したい

全layoutで <App> の中に <ProjectCSS> を表示しても良いと思う

layoutは一旦 "unknown" というレイアウト名で仮レンダリングしてしまう

ただし、これまで通りCurentProject storeやLayoutStoreのsubscribeは行う

project移動したら <ProjectCSS> タグを更新する

project settings画面に移動したりしたら <ProjectCSS> タグを消去する

作のuseStore hookを使ったらうまくいった

review appで見ると、これでもまだちょっとチラ付きは残っている

ローカル開発環境では全く無い

review appでも、page画面ではほぼチラつかない

review appのpagelist画面ではチラつきがある

ブラウザのリロードボタンでは見えない

新規タブでpagelist画面のURL直うちするとチラつく

この差は、page画面の描画がpage APIのレスポンス待ちの分だけ遅いのが原因だろう

偶然いい感じのディレイが入ってくれているという事

もっとチラつきを抑える

全体が遅くなる

しかし、これは仕方ない。そうするしかない

Reactのレンダリングよりも前のタイミングで <ProjectCSS> を描画する

サーバーが送信するHTMLに <link rel="stylesheet"> を書いておく

Client Side Renderingより先にCSS読み込む

assets cacheのうち app.html をServiceWorker内で動的生成しなければならない

雑に100 msecぐらい待つ

ダメだった

結局、回線速度が遅ければ100 msec以上待たないとタイミング合わない

改善