ProjectCSSの投機的読み込み
styleタグをReactで描画している
styleタグを作る前に、CurrentProjectやLayoutのStoreを作るための通信を待っている
https://gyazo.com/4f52af5d5901f61e22d0026d623773c8https://gyazo.com/d115e08c4a2e65408016ce9389144213
技術的にできなくはなさそうだけど、自分は要らないshokai.icon
画面がチラつくほど大きくデザイン変更するUserCSSを書かないので
cache storageから描画する？
実装が複雑になる
初めてアクセスした人のcache storageには入ってない
styleタグの描画のタイミングがもう少し速くなれば解決しそう
/api/code/:projectName/settings/style.cssを読み込むだけなのだから
Project Storeのロード完了とかを待ってそう
URLが確定した時点でProjectCSSのURLも確定する
現在のURLを元に投機的に読み込みを試みて良いはず
ブラウザ側でユーザーがproject memberであるかとか、projectがprivateかとか確認する必要もない
Project CSSの投機的読み込み
https://gyazo.com/0d0d3226fd0cf4e5481f08d07a8f0d60https://gyazo.com/74547415b6e391c11ebc6496c053493d
最速で<ProjectCSS>タグを描画する
CurrentProject storeやLayout storeの初期化を待たない
location.pathnameだけ見てprojectNameを判定
<App />コンポーネントとも分離
https://gyazo.com/4e40c17d42d344d7cf89e3a4f21d274f
なるほど、root componentごと分離してしまえばよかったのか daiiz.icon
やりやすいからこうしちゃったshokai.icon
<App>というコンポーネントがlayoutに合わせて子コンポーネントを切り替えるコンポーネントなので
layoutが確定する前に<ProjectCSS>をDOMに出したい
全layoutで<App>の中に<ProjectCSS>を表示しても良いと思う
layoutは一旦"unknown"というレイアウト名で仮レンダリングしてしまう
ただし、これまで通りCurentProject storeやLayoutStoreのsubscribeは行う
project移動したら<ProjectCSS>タグを更新する
project settings画面に移動したりしたら<ProjectCSS>タグを消去する
review appで見ると、これでもまだちょっとチラ付きは残っている
ローカル開発環境では全く無い
review appでも、page画面ではほぼチラつかない
review appのpagelist画面ではチラつきがある
ブラウザのリロードボタンでは見えない
新規タブでpagelist画面のURL直うちするとチラつく
この差は、page画面の描画がpage APIのレスポンス待ちの分だけ遅いのが原因だろう
偶然いい感じのディレイが入ってくれているという事
もっとチラつきを抑える
全体が遅くなる
しかし、これは仕方ない。そうするしかないshokai.icon
Reactのレンダリングよりも前のタイミングで<ProjectCSS>を描画する
サーバーが送信するHTMLに<link rel="stylesheet">を書いておく
Client Side Renderingより先にCSS読み込む
雑に100 msecぐらい待つ
ダメだったshokai.icon
結局、回線速度が遅ければ100 msec以上待たないとタイミング合わない
改善