Vite causes FOUC

[ThatOneCalculator]

💡 Summary

This:

2022-05-20.19-16-59.mp4

5c0e98f52c7403d301079099df74fb7f4dbe5da614773a43ce89bb5feb66aaef0bc6a5a75a243a8855c8717d7ca2e7f126ba72ed5b591919608ffd4373cd77f2.mp4

📝 Steps to Reproduce

1. Load Misskey

This seems to be a problem with Vite, as this didn't happen before Vite.

📌 Environment

Misskey version: Latest git (12.110.1)
Your OS: Linux, Android
Your browser: Firefox, Chrome

[syuilo]

This seems to be a vite issue. (FOUC)

[ThatOneCalculator]

I think it's the problem of Vite not loading styles at startup. Seems like I'm not the only one with this issue: https://stop.voring.me/notes/90itqps1g3

[tamaina]

I have asked the question on the Vite Discord but received no response.

Note
PR of Vite #8575

[tamaina]

いつの間にかVite 3のalphaが出ておる…

[tamaina]

もしかしたら、Viteのバージョンを2.9.9などに上げれば直るかもしれない

[4ioskd]

FYI: 現在はv3.0.0-alpha.2が出てます
https://github.com/vitejs/vite/releases

[ThatOneCalculator]

I switched my instance to build with Vite 3 Alpha 4 (with the Alpha 3 Vue plugin) and sadly it didn't fix the issue.

[NovaAndrom3da]

Oh. I've had this/a very similar issue with vite. Try disabling HMR (hot module replacement) in the vite json config file.

  "hmr": false,

Although, doing this will cause you to have to restart the server each time you make a change on the server, which shouldn't be a big deal if you are attempting to run in a production deployment, but would get annoying in a development environment.

[NovaAndrom3da]

This can sometimes be fixed by setting the HMR client port to 443 (as mentioned here: vitejs/vite#4259) but (IIRC) it didn't work for me when I had this issue.

[NovaAndrom3da]

Just to make sure, do you see connection to server lost, polling for restart when you open DevTools?

[tamaina]

We are using vite build --watch and do not use HMR, so I don't think it will solve the problem.

[tamaina]

I confirm that updating vite to 2.9.9 and server.hmr: false does not solve the problem in my local environment.

[tamaina]

Issue出すにしてもminimal reproducible exampleだと再現しない…

[acid-chicken]

FOUC だから当たり前だけど CSS の読み込みタイミングが遅すぎる

ここら辺関連しそう？ vitejs/vite#2460 (comment)

[acid-chicken]

現に preload 指定してる fontawesome の css は一番に読み込まれているので、rollup でビルドした結果を元に必要な必須チャンクを決定して、HTML 生成時に注入することが解決になりそう。

misskey/packages/backend/src/server/web/views/base.pug

Line 33 in 708fba9

link(rel='preload' href='/assets/fontawesome/css/all.css' as='style')

[acid-chicken]

手前の読み込みが長すぎて待ってくれてなさそう

もしかしてここが原因では

misskey/packages/client/src/scripts/theme.ts

Lines 13 to 36 in 38e6202

	export const lightTheme: Theme = await import('@/themes/_light.json5');
	export const darkTheme: Theme = await import('@/themes/_dark.json5');
	export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
	export const builtinThemes = [
	await import('@/themes/l-light.json5'),
	await import('@/themes/l-coffee.json5'),
	await import('@/themes/l-apricot.json5'),
	await import('@/themes/l-rainy.json5'),
	await import('@/themes/l-vivid.json5'),
	await import('@/themes/l-cherry.json5'),
	await import('@/themes/l-sushi.json5'),
	await import('@/themes/d-dark.json5'),
	await import('@/themes/d-persimmon.json5'),
	await import('@/themes/d-astro.json5'),
	await import('@/themes/d-future.json5'),
	await import('@/themes/d-botanical.json5'),
	await import('@/themes/d-cherry.json5'),
	await import('@/themes/d-ice.json5'),
	await import('@/themes/d-pumpkin.json5'),
	await import('@/themes/d-black.json5'),
	] as Theme[];

[acid-chicken]

@tamaina applyTheme の処理どうせ CSS Paint 挟むから実質非同期だし、 src/scripts/theme.ts で即時読み込みせずに遅延読み込みにするか Promise のまま渡してもいいんじゃない？

[tamaina]

@acid-chicken なるほど、テーマ周りは深く考えずにrequireを置換したのでリファクタの余地がありそう

[acid-chicken]

直接的原因であるないに関わらずこれは読み込みに大きな問題を引き起こしている

[acid-chicken]

await import が並ぶと黄色の枠のような虚無区間を生成することになる

[tamaina]

(良く考えたらせめてPromise.allを使うべきだったわ…)

[tamaina]

（PR出す前に先にコメント書くけど）テーマは関係ないっぽいなぁ

[tamaina]

仮説: CSSは読み込まれているが、scopeを判別するための[data-hoge]が後から付けられている

[ishowta]

style.scssapp.hoge.cssだけ遅れてるかも？

[tamaina]

仮説: CSSは読み込まれているが、scopeを判別するための[data-hoge]が後から付けられている

css moduleもちゃんとFOUCになっているので違う気がする…？でもcss moduleも同じか？

style.scssだけ遅れてるかも？

style.scssというかapp.hoge.css？デッキやユニバーサルUIの骨組みだけは描画されたりしているので確かにそうかも…！