Double render content

[developer-bart]

Hi,

I'm trying to add a custom page transition. Somehow tho when I click on the TransitionLink and quickly after click on a link it shows double content.

This is the code I'm using:

<TransitionLink
    to="/page-2"
    exit={{
        trigger: ({ node, e, exit }: any) => console.log(node, e, exit),
            length: 1,
        }}
        entry={{
            length: 1,
            delay: 1,
        }}
>
    {children}
</TransitionLink>

Any ideas what's going wrong?

[TylerBarnes]

@bbeemster the plugin is supposed to lock navigation during a transition. Probably what's happening is your header link is in a layout (correct me if I'm wrong), so it's outside of the React context of the page with the second link you're clicking, which means clicking the layout link isn't locking navigation for the page link (different context), then when you click the page link it's navigating immediately, but the transition still happens at the same time.

If I'm right about that, this is a bug. Is that top link in a layout?

[TylerBarnes]

The other possibility is that the second link you click isn't a transition link or anilink, so the navigation also isn't locked for it. That's another possibility.

[developer-bart]

Hi there, thanks for your quick response and sorry for my late one :) You are right about the top link being inside the layout.

[samullman]

I'm having a similar issue with doubly rendered content.

[TylerBarnes]

@samullman I think that's actually expected behaviour for the cover animation, since both pages need to exist at the same time to look fluid. If you give your pages a white background it will solve it. I can't remember if this is noted on the documentation site or not.

[TylerBarnes]

It would be good to be able to have a look at it hands-on though. Are you able to share your repo with me?

[TylerBarnes]

To recap on what were seeing here: One of the features of TL is to be able to overlap pages. In certain animations this is desirable. For example in the cover animation, we want to keep both pages on the screen at the same time because the div that animates accross the screen belongs to the exiting page, so if we were to unmount the exiting page that cover element would also unmount. I think in the case of @bbeemster's issue, something is screwy when clicking on a couple links in a row where the pages shouldn't be overlapping.

Actually @bbeemster I just had a thought, are you mixing Gatsby Link and Transition Link? That could cause the issue you were having.

[muuvmuuv]

In my case it renders the host and child page multiple times which causes a lag in my layout header component.

Here is a video: https://imgur.com/a/H2fKIh9

I have loaded the layout using layout: require.resolve('./src/layouts/Index.jsx'),

Structure is:

layouts/Index.jsx

• GlobalProvider ← holds context to share stuff between components
  • HelmetProvider
    • Header ← nav and other stuff
    • <main>{children}</main>

pages/articles.jsx

• list of all articles

templates/articleTemplate.jsx

• Article ← render article

[TylerBarnes]

@muuvmuuv I believe that's a separate issue. The reason is that this package is adding the transition status to the page props. In retrospect this wasn't such a good decision since it causes unnecessary rerenders as the status updates throughout the transition. In v2 it will no longer do this by default. If you'd like it sooner I can add a plugin option to disable it.

[muuvmuuv]

Ah ok. When are you gonna release v2? I‘m updating my portfolio and want to releasee before the new year. But no hurry. It is not something I really need for the refactoring

_{Sent with GitHawk}

[TylerBarnes]

No timeline yet for v2. I haven't had much time to work on this plugin the last 8ish months since I was working full time at an agency and then working on my WordPress plugin in my free time since it was more personally urgent than this plugin. I joined the Gatsby core team this week though which should generally mean I'll have a bit more time to work on this plugin than I've had lately.

[davwheat]

This is still an issue, even with a page with a background. If the new page is shorter than the old, the old page still shows if you scroll.

For me it sometimes stays forever, until a refresh or new navigation.

[TylerBarnes]

@muuvmuuv that plugin option is available now.

    {
      resolve: 'gatsby-plugin-transition-link',
      options: {
        injectPageProps: false,
      },
    },

@davwheat that would be a separate issue, there are 4 different problems in this issue that all appear similar but have separate causes. If you're able to share a simple reproduction I can have a look at it.