The cursor does not disable active mode when I go to a new page in Next JS

[ivanjeremic]

The cursor does not disable active mode when I go to a new page in Next JS, It only works if I randomly click anywhere in the body on the new page then it works again, basically when I click a link and on the new page the cursor stays active the active does not go away until I click somewhere in the body.

Any solution to this? The library needs somehow to detect a page change a reset everything in the cursor until it goes over a link again.

[JordanSuarez]

Hello,

I'm not using Next JS, but i have the same issue, when i change page the Cursor does not disable active mode.

I found a solution, it's not the better of course, but it's work for me, it's just for a small project (my portfolio).

So the solution consist to import the Cursor component inside the router component (react router dom), so I can use the useHistory hook to detect if the current location has change.

Then, inside the Cursor component, I added a useEffect which will update the Cursor state (isActive) at each change of route.

i hope it will help

[stephenscaff]

Sorry, just caught this. @ivanjeremic I assume you're using Next's Link helper when updating routes?
And thanks for the insight @JordanSuarez. I'll see what we can come with built in, but some kind of way to update if isActive feels like a good move. Or, maybe just going inactive after clicks?

Will check it out today.

[ivanjeremic]

Sorry, just caught this. @ivanjeremic I assume you're using Next's Link helper when updating routes?
And thanks for the insight @JordanSuarez. I'll see what we can come with built in, but some kind of way to update if isActive feels like a good move. Or, maybe just going inactive after clicks?

Will check it out today.

Yes, there needs to be something that sets the cursor inactive after clicks, I tried the solution @JordanSuarez suggested long before opening this issue and it would work in a normal CRA but in NextJS the method has no effect the cursor still stays active after clicking a link or button and navigating to a new page, any recommendations to quick fix this until there is something built-in? Thanks

[ivanjeremic]

Anything new on this?

[baktiaditya]

hope can give you some inspiration, I'm using this in my Next.js project (modified version of react-animated-cursor)
https://gist.github.com/baktiaditya/41d83e04972cca950b59bb7ac83e7930#file-cursor-tsx-L60-L81

usage in Next.js _app.tsx:

const router = useRouter();
const cursorRef = React.useRef<CursorRef>(null);

React.useEffect(() => {
  router.events.on('routeChangeComplete', progressDone);
  router.events.on('routeChangeError', progressDone);

  return () => {
    router.events.off('routeChangeComplete', progressDone);
    router.events.off('routeChangeError', progressDone);
  };
}, []);

const progressDone = () => {
  const { current: cursor } = cursorRef;
  if (cursor) {
    cursor.update();
  }
};

return (
  <Cursor ref={cursorRef} />
);

[ivanjeremic]

@baktiaditya Thank you, do I still need to import it dynamically? It works perfectly for the built-in a tags but I have some dynamically generated elements that do not trigger the cursor animation even when added to the clickableTargets any idea? I use also a lot of 'id's in my targets can this be an issue?

It works only when I do some random changes in the editor and save and go directly over some element then the animation works, but as soon as I reload it stops working.

[ivanjeremic]

@baktiaditya Hope you have some advice for me why some links only work after I save some work in the editor and instantly try on the Site but as soon as I refresh the browser it stops working until I add some random comment in my code and safe. hmm

This Cursor has the exact same issues, the only solution is to import the Cursor in every component/page

[stephenscaff]

Sorry. Been crushed lately but have some time to look at this after tomorrow. Can you make a reduced test to look at? I haven’t had that issue.

…

On Fri, Jun 25, 2021 at 6:58 AM Ivan Jeremic ***@***.***> wrote: @baktiaditya <https://github.com/baktiaditya> Hope you have some advice for me why some links only work after I save some work in the editor and instantly try on the Site but as soon as I refresh the browser it stops working until I add some random comment in my code and safe. hmm — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABFUPFPA5WBKIT665W253CTTUSDQVANCNFSM4XOZQQPA> .

[baktiaditya]

clickableTargets

@baktiaditya Thank you, do I still need to import it dynamically? It works perfectly for the built-in a tags but I have some dynamically generated elements that do not trigger the cursor animation even when added to the clickableTargets any idea? I use also a lot of 'id's in my targets can this be an issue?

It works only when I do some random changes in the editor and save and go directly over some element then the animation works, but as soon as I reload it stops working.

You can refactor my Cursor code and try to make the clickableTargets as a props. And for the dynamic elements, you can use react context to pass the cursorRef from the _app.tsx file, then call cursor.update in you related pages / components when your dynamic elements is rendered.

[milindgoel15]

Any updates? It seems to be causing it on app router for me but fine on pages router

[stephenscaff]

Yikes…. Been under water with work stuff and slacked on this. But have a better understanding of RSC and next14 app dir now. So, will take a closer look, probs tomorrow (have a very sick kiddo right now). Can ping you once I push something up. Thanks.

…

On Mon, Jan 15, 2024 at 9:27 AM Milind Goel ***@***.***> wrote: Any updates? It seems to be causing it on app router for me but fine on pages router — Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABFUPFLGMORLXDGVQOQIVY3YOVRIRAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TKNRRG4ZA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ivanjeremic]

I solved this with a nice hack and fork, can publish my version to npm if so many people have this issue. Gesendet von Outlook für iOS<https://aka.ms/o0ukef>

________________________________ Von: Stephen Scaff ***@***.***> Gesendet: Monday, January 15, 2024 6:32:32 PM An: stephenscaff/react-animated-cursor ***@***.***> Cc: Ivan Jeremic ***@***.***>; Mention ***@***.***> Betreff: Re: [stephenscaff/react-animated-cursor] The cursor does not disable active mode when I go to a new page in Next JS (#6) Yikes…. Been under water with work stuff and slacked on this. But have a better understanding of RSC and next14 app dir now. So, will take a closer look, probs tomorrow (have a very sick kiddo right now). Can ping you once I push something up. Thanks.

On Mon, Jan 15, 2024 at 9:27 AM Milind Goel ***@***.***> wrote: Any updates? It seems to be causing it on app router for me but fine on pages router — Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABFUPFLGMORLXDGVQOQIVY3YOVRIRAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TKNRRG4ZA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

— Reply to this email directly, view it on GitHub<#6 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ADKF4ADN5PTOUOVCEJGHZUDYOVR3BAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TMMJZGQ2Q>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[stephenscaff]

Submit a PR if you’d like and I’ll merge it in. On Mon, Jan 15, 2024 at 9:39 AM Ivan Jeremic ***@***.***> wrote:

…

I solved this with a nice hack and fork, can publish my version to npm if so many people have this issue. Gesendet von Outlook für iOS<https://aka.ms/o0ukef> ________________________________ Von: Stephen Scaff ***@***.***> Gesendet: Monday, January 15, 2024 6:32:32 PM An: stephenscaff/react-animated-cursor ***@***.***> Cc: Ivan Jeremic ***@***.***>; Mention ***@***.***> Betreff: Re: [stephenscaff/react-animated-cursor] The cursor does not disable active mode when I go to a new page in Next JS (#6) Yikes…. Been under water with work stuff and slacked on this. But have a better understanding of RSC and next14 app dir now. So, will take a closer look, probs tomorrow (have a very sick kiddo right now). Can ping you once I push something up. Thanks. On Mon, Jan 15, 2024 at 9:27 AM Milind Goel ***@***.***> wrote: > Any updates? It seems to be causing it on app router for me but fine on > pages router > > — > Reply to this email directly, view it on GitHub > < #6 (comment)>, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/ABFUPFLGMORLXDGVQOQIVY3YOVRIRAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TKNRRG4ZA> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> > — Reply to this email directly, view it on GitHub< #6 (comment)>, or unsubscribe< https://github.com/notifications/unsubscribe-auth/ADKF4ADN5PTOUOVCEJGHZUDYOVR3BAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TMMJZGQ2Q>. You are receiving this because you were mentioned.Message ID: ***@***.***> — Reply to this email directly, view it on GitHub <#6 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABFUPFPF5NVWCLXDOC4XEFLYOVSVTAVCNFSM4XOZQQPKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBZGI2TOMBQGQYQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ivanjeremic]

I will dig it out from the codebase where I used my custom cursor and try to fix it here once I find time.

[adamgobes]

@ivanjeremic mind sharing how you solved the issue? I'm also running into it.

TLDR is the cursor stays active and enlarged when I click on a NextJS route and am navigated to a new page