最近は CSR のものばかりで最初から HTML があるものはあまり作らないので気にしてなかったのですが 久々にそういうページを作ったら module のロード中に初期化前の状態が見えていまいちなものになりました
CSS のロードも ESM でやると適用されるのが後からになりますからね
また CSS を同期的にしても JavaScript で初期状態のクラスを設定する場合 module が全部ロードされてから処理が行われるので それまでに違う状態の画面が表示されてしまいます
ほぼ一瞬ですが チラつきになりますし あまり気持ちのいいものではないです
一瞬関係ない画面が映るよりは display: none をつけて何も表示されないほうがマシかなと思って display: none にしてみると 思ってた以上に良い動作になりました
一瞬の真っ白な画面が挟まりません
前のページの画面が維持されて display: none が消えて表示される状態になって始めて画面が更新されました
ただ 500ms くらいが境目のようで 600ms とか 1s ほどの遅延になると一瞬真っ白な画面が挟まります
それ未満の 300ms などだと 真っ白な画面は発生しません
display: none を外してみると 一瞬関係ない画面は出るので ブラウザがいい感じにしてくれてるようです
注意点として body の中身が全く表示されない状態の必要があります
メインのコンテンツの div を display: none にしてもその外に表示される要素があったら それだけが表示されます
body ごと display: none にしておくのがいいかもですね
試せるページ↓
遅延300ms+display:noneあり
遅延300ms+display:noneなし
遅延800ms+display:noneあり
遅延800ms+display:noneなし
下の方にあるリンクでメインとサブのページを交互に移動できます
URL の delay と hide で遅延させる時間や display: none の有無を変更できます
詳細はページ内のクエリパラメータの説明参照です