//tips
//smart contract
ページにローディングバー表示を導入する。
まずはwindowを表示してみようとも模索。
useEffect(() => {
// Client-side-only code
console.log("window.innerHeight", window.innerHeight);
window.onload = (event) => {
console.log('page is fully loaded');
};
})
Next.jsではサーバ、ブラウザどちらでも動くUniversalなコードを書かなければいけないので、windowなどのブラウザ固有のメソッドを呼び出すときは、useEffectもしくはcomponentDidMountなどといったブラウザ側のみで実行されることが保証されるところに記述しなければならないよう。
どちらもマウント時に実行されるもの。useeffectの方が変数の変更を察知できる分用途が広いか。
https://ja.reactjs.org/docs/react-component.html
Window表示を特定条件下で発動するようにするのはuseeffectとbool関数の組み合わせになりそう。
色々探しているともっとシンプルにできそうなものを発見。
全ページに影響を与える_appをあまり変更したくなかったが、軽微なので実験してみる。
import Router from 'next/router';
Router.events.on("routeChangeStart",(url)=>{
console.log('Route is changing..');
})
まずはルート変更が発生したときにログを吐き出す仕組みを追加。
きちんと機能した。
Componentフォルダに下記を追加。
export default function Loader(){
return(
<div>Loading...</div>
)
}
Loadingのアイコンは下記で取得するか検討。
https://loading.io/
そのコンポーネントを_appのloading中に表示させるようにする。boolのタイミングだけreturnのrendering内容として認識されるようにすれば良い。
const [loading,setLoading]=useState(false)
Router.events.on("routeChangeStart",(url)=>{
console.log('Route is changing..');
setLoading(true)
})
Router.events.on("routeChangeComplete",(url)=>{
console.log('Route is changed');
setLoading(false)
})
<Layout>
{loading&&<Loader />}
<Component {...pageProps} />
</Layout>
さらにloadingバーを表示させるプラグインがあるようなのでそちらを導入。
Nprogress
https://cdnjs.com/libraries/nprogress
https://www.npmjs.com/package/nprogress
npm install --save nprogress
さらにheadの箇所にバーを表示できるようにurlを追加。
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" integrity="sha512-42kB9yDlYiCEfx2xVwq0q7hT4uf26FUgSIZBK8uiaEnTdShXjwr8Ip1V4xGJMg3mHkUt9nNuTDxunHF0/EgxLQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</Head>
バーの効果は確認できず、一方でnext/headに使わないようにとの警告が出た。
Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css"). Use Document instead.
See more info here: https://nextjs.org/docs/messages/no-stylesheets-in-head-component
Document側に使用する必要があるのか。
探してみるとnext用のもっとシンプルなnextjs-progressbarがあるよう。
https://blog.parity-box.com/posts/diary/2021/08/25
こちらでトライ。
npm i nextjs-progressbar
<NextNProgress
color="#29D"
startPosition={0.3}
stopDelayMs={200}
height={3}
showOnShallow={true}
/>
素晴らしすぎる。progressbarがしっかり表示された。
読み込むのにどれだけ難儀しているのかわかった。
ローディング画像が欲しくなったのでloading.ioの使い方を調べていく。
