GatsbyJSでprogressbar（プログレスバー）を簡単に表示させる２つのパターン

記事をスクロールするプログレスバーとページ遷移時のプログレスバーの２種類あります。

別々に試しに実装してみました。

GatsbyJSのページ遷移時のプログレスバー

Gatsby公式プラグインに gatsby-plugin-nprogress があります。

nprogressというJSライブラリをGatsbyJSでも使えるようにラップしたライブラリです。

npm i gatsby-plugin-nprogress
or
yarn add gatsby-plugin-nprogress

gatsby-config.js

plugins: [
    {
      resolve: `gatsby-plugin-nprogress`,
      options: {
        color: `#76952F`,
        showSpinner: true,
      },
    },
]

これだけでページ遷移にプログラスバーを表示できるようになります。

ページ遷移に１秒以上かかるページでないとプログレスバーが表示されない

しかし自分の作ったサービスに実装してみたところ表示されませんでした。

ライブラリのソースコードを見たところ、

gatsby-plugin-nprogress/src/gatsby-browser.js

省略
export const onRouteUpdateDelayed = () => {
  NProgress.start()
}
省略

となっていてGatsbyJS側で用意されている onRouteUpdateDelayed の実行に合わせてNProgressを読み込ませています。

そしてこの onRouteUpdateDelayed なのですが、 onRouteUpdateDelayed というローディングの遅延を監視する関数が実行されるまでに1000msかかる仕様になっているのでこれが原因のようです。

gatsby/packages/gatsby/cache-dir/navigation.js

省略
  const timeoutId = setTimeout(() => {
    emitter.emit(`onDelayedLoadPageResources`, { pathname })
    apiRunner(`onRouteUpdateDelayed`, {
      location: window.location,
    })
  }, 1000)
省略

１秒以下でページ遷移できたページで実行されないのは当然の結果でした。重いページで試したところ無事動作を確認。

しかし1秒未満のページ遷移が珍しくない時代なのでもっと短い遅延で読み込まれるようにしたいのでそこは不便でした。
解決策がわかる方がいればコメントもらえればなと。

GatsbyJSのページスクロールのプログレスバー

Gatsbyコミュニティのライブラリに gatsby-plugin-page-progress がありこれを使います。

npm i gatsby-plugin-page-progress
or
yarn add gatsby-plugin-page-progress

gatsby-config.js

    {
      resolve: "gatsby-plugin-page-progress",
      options: {
        includePaths: [{ regex: "^/elm" }, { regex: "^/worry" }, { regex: "^/blog" }, { regex: "^/about" }],
        // excludePaths: ["/elm/hoge"], // includePathsの範囲で例外のパスを指定すればそのPathだけ除外できる
        height: 3,
        prependToBody: false,
        color: `#76952F`,
        footerHeight: 500,
        headerHeight: 0,
      },
    },

これもとても簡単に実装できます。gatsby-config.jsへオプション指定してあげれば良いです。
includePathsはプログレスバーを表示させるPathを指定。
Pathを指定した範囲の中で例外があればexcludePathsで指定します。

自分の用途では特に問題なく使用できました。

スター数が少ないのがネック

現時点で22スター最終更新は２ヶ月前ということでライブラリ全般の中ではあまりポピュラーではないかもしれません。

ただし、srcファイルを見た限りでは1ファイルの189行のみでwindow.locationで位置を取得しながらレンダリングする比較的にシンプルなライブラリであるため問題が起こってもフォークしてトラブルシューティングもできそうなライブラリかなとは思いました。