Agrega nprogress bar a tu Layout the gatsby

Nprogress es un indicador de carga cuando tu aplicación cambia de pagina. En este caso se lo puedes aplicar a tu barra de navegación.

Lo primero que tienes que hacer es iniciar un nuevo proyecto en Gatsby con:

gatsby new Nprogress-Site

Dentro de tu proyecto instala la dependencia de Nprogress con:

npm install nprogress

Para que nprogress funcione adecuadamente necesitamos agregar el css de nprogress a una parte del css de nuestra aplicación que se use de forma global, en este caso lo mas lógico seria agregarlo al css de nuestro layout. Entonces abre el archivo layout.css que viene en los componentes del starter y añade el siguiente código para que nprogress funcione.

#nprogress {
  pointer-events: none;
}

#nprogress.bar {
  background: red;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */#nprogress.peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0010px red, 005px red;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */#nprogress.spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress.spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: red;
  border-left-color: red;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent#nprogress.spinner,
.nprogress-custom-parent#nprogress.bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Ahora crearemos una navbar para poder navegar entre nuestras paginas, recuerda que todos los componentes se guardan en la carpeta de componentes.

//Navbar componentimport React, { Component } from"react"import { Link } from"gatsby"classNavbarextendsComponent{
  render() {
    return (
      <nav><Linkto="/">
          Pagina 1
        </Link><Linkto="/page-2" >
          Pagina 2
        </Link></nav>
    )
  }
}

exportdefault Navbar

Después necesitamos agregar las funcionalidades de Nprogress para que se vea como se cargan las páginas. Para ello importaremos nprogress a nuestra navbar y haremos uso de dos métodos de nprogress.

• nprogress.start()
• nprogress.done()

Estos métodos se ejecutaran en tres partes, cuando nuestro componente se monte, cuando se desmonte y cuando hagamos click en un link. Recuerda que el componente Link de gatsby soporta el atributo de onClick, el resultado sería el siguiente:

import React, { Component } from"react"import { Link } from"gatsby"import nprogress from"nprogress"classNavbarextendsComponent{
  handleChangePage = () => {
    nprogress.start()
  }

  componentWillUnmount() {
    nprogress.done()
  }

  componentWillUpdate() {
    nprogress.done()
  }

  render() {
    return (
      <nav><Linkto="/"onClick={this.handleChangePage}>
          Pagina 1
        </Link><Linkto="/page-2"onClick={this.handleChangePage}>
          Pagina 2
        </Link></nav>
    )
  }
}

exportdefault Navbar

Casi por último importa el componente de la navbar a tu Layout y agrégalo al render.

//layout.jsimport React from "react"import PropTypes from "prop-types"import { useStaticQuery, graphql } from "gatsby"import Header from "./header"import Navbar from "./nav"import"./layout.css"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Navbar />
      <Header siteTitle={data.site.siteMetadata.title} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0px 1.0875rem1.45rem`,
          paddingTop: 0,
        }}
      >
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Finalmente inicia gatsby develop y mira la animación que logra nprogress entre el cambio de cada página.