Page transitions with Link component not instant

Hi!

I'm having some problems with getting page links in Prismic and Gatsby to work properly.

I'm using a linkResolver as described in the docs and it works in terms of directing to the correct pages, but the transition is not instant. When I'm using the Link component provided by Gatsby in a project without Prismic, it switches in an instant. The behavior is especially visible because I have a dark mode implemented which colors the background dark, so every time I click on a link there's a flash of white.

I think the problem is with Prismic's link handling here, but I already tried everything regarding restructuring the linkResolver or linking directly to pages using the Gatsby Link component.

The linkResolver in my gatsby-config.js looks like this:

{
      resolve: "gatsby-source-prismic",
      options: {
        repositoryName: "...",
        lang: "*",
        linkResolver: () => (doc) => linkResolver(doc),
        schemas: {
          home: require("./src/schemas/home.json"),
          layout: require("./src/schemas/layout.json"),
          about: require("./src/schemas/about.json"),
          contact: require("./src/schemas/contact.json"),
          product: require("./src/schemas/product.json"),
          page: require("./src/schemas/page.json"),
          404: require("./src/schemas/404.json"),
        },
      },
    },

This is the linkResolver itself:

const linkResolver = doc => {
  const defaultLanguage = "en-us"

  switch (doc.type) {
    case "home":
      return doc.lang === defaultLanguage ? "/" : `/${doc.lang.slice(0, 2)}`
    case "about":
    case "contact":
    case "page":
    case "product":
      return doc.lang === defaultLanguage
        ? `/${doc.uid}`
        : `/${doc.lang.slice(0, 2)}/${doc.uid}`
    default:
      return "/"
  }
}

module.exports = linkResolver

And I use it in my components like this:

<Link to={linkResolver(item.link)}>{item.title.text}</Link>

I hope I explained my problem properly. I can also share my repo if needed.

Thanks in advance for any help!

Jennifer

Hello Jennifer, welcome to the Community

Which version of the plugin do you have installed in the project?
In the latest version the link Resolver is passed like this in the configuration:

linkResolver: (doc) => linkResolver(doc),

Could you show me an example of your link components? I'm curious to see what you're passing to the Link. For internal links it should be the URL from he links that you get from the queries.

Hi Paulina!

I'm using version 3.3.4 of gatsby-source-prismic plugin, but upgrading to the latest 3.3.6 doesn't make a difference. When I try to pass the linkResolver like you said the build breaks with the message

"gatsby-source-prismic" threw an error while. running the sourceNodes lifecycle:

a is not a function

  61 | }
  62 |
> 63 | const buildAll = async (
     |               ^
  64 |   pluginOptions: PluginOptions,
  65 |   gatsbyContext: SourceNodesArgs,
  66 |   typePaths: TypePath[],

File:node_modules/gatsby-source-prismic/src/gatsby-node.ts:63:15

What I'm passing to the link component is the entire data pulled from Prismic and sort it out in the linkResolver itself as shown in my initial message.

link {
     uid
     type
     lang
     url
     link_type
}

Thanks for your help!

Ok, I see. I recommend you migrate to the latest version of the plugin; here's the migration guide. And for the link, it should be enough to pass the link.url value to it, like so:

<Link to={link.url} className="banner-button">
   Link label
</Link>

This thread has been closed due to inactivity. Flag to reopen.