Blockchain code Metaverse VR

Crypto×VR×SmartContract(539)

スポンサーリンク

//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の使い方を調べていく。

ローディング画像をSVGアニメで作れる『loading.io』がお勧め

 

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.