📑
loading中だけ特定のclassNameを指定する
結論
useEffectの第二引数が空の配列の時にclassListからloadingの時だけ指定したいclass属性を削除する。
export default function App({ Component, pageProps }: AppProps) {
useEffect(() => {
document.body.classList?.remove('loading');
}, []);
return (
<div className="loading">
</div>
);
}
解説
useEffectの第二引数が空の配列の時、マウント時(とアンマウント時)にのみ実行されることからマウント時にclassListからclassNameloadingを指定してclass属性を削除すれば、classNameloadingで指定したCSSは適用されなくなります。
virtual-event-starter-kit の書き方を見て便利だなと思い書きました。
Discussion