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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.