Flicker with HierarchicalMenu in Next.js 14.2.5

[sefai]

I am using HierarchicalMenu with SEO friendly URLs. After clicking any menu item, HierarchicalMenu and products are updated with a client-side query. Then it shows Menu and products without HierarchicalMenu applied for a brief moment and then reverts to normal state. I have made a slow motion video, you can clearly see the flicker. What could be the reason?

flicker-slow.mp4

[Haroenv]

Are both widgets using the same attribute? Not sure what could cause this as it's hard to see in the video. Do you have a reproduction of this?

[aymeric-giraudet]

Hi @sefai sorry for the late reply.

You would have to remove the history.pushState solution.

I found a userland workaround as it's quite specific, but you can try this component :

function SaveLatestResultsOnUnmount() {
  const { results } = useInstantSearch();

  useEffect(() => {
    if (!results.__isArtificial) {
      const initialResults = {
        [results.index]: {
          results: results._rawResults,
          state: results._state,
        },
      };
      // @ts-ignore
      window[Symbol.for("InstantSearchInitialResults")] = initialResults;
    }
  }, [results]);

  return null;
}

You can use put it as a children of InstantSearchNext. This will override initialResults which is kinda hacky but it works.
However the image component will still flicker as it's being remounted, but this is a Next.js thing.

You could also make an API route for the other stuff you need to update and make manual client-side requests for them.

[sefai]

Thank you @aymeric-giraudet

useLayoutEffect does not cause a flicker, maybe it's better to use in this case?

[aymeric-giraudet]

Yes @sefai, good idea !

I was thinking, you could probably also render Hierarchical Menu items as Next.js links, that way the transition will be made sooner without flickering and there shouldn't be a need for this hack either

[sefai]

I've already tried that, in fact I've tried many different things using Hierarchical Menu with both Next.js and Remix.

• using Links from both frameworks => all InstantSearch components lose their data, a completely blank page until client side algolia query finishes.
• awaiting fetch(from api routes) then calling onNavigate of HierarchicalListProps => no way to provide a feedback to the ui, page remains constant until fetch and algolia query finishes, then an immediate change on all components. From a UX perspective this doesn't look good and it is also against the navigation patterns of both frameworks.
• for remix and Link, returning serverState with my custom data => all InstantSearch components remain as it is, i can provide a feedback like changing opacity of hits until transition occurs, but there is an unnecessary duplicate client side query which I couldn't get rid off. I suspect it is because of this. I think returning serverState within a Remix client-side navigation is not handled as in SSR case, so cache misses.
• lastly this issue => using your kinda hacky solution, useLayoutEffect and loading="eager" on images prevents flicker. But refinementLists are also making a server request which I suspect is a problem within Next.js and maybe Next15 can help but it requires React 19 and algolia does not support it yet.

There are really many different ways but every one of them has a caveat. So I would really appreciate an official way of getting server data before client side navigations whenever necessary using InstantSearch.

[sefai]

FYI

• for remix and Link => this is because of singleFetch. If I disable singleFetch this works.