Flicker with client component

[pontusab]

I have some flicker on refresh when using client components with translations, it's due the suspense in I18nProviderClient is there a way to fix this flicker?

https://github.com/QuiiBz/next-international/assets/655158/90f4363f-6dae-4e90-ad22-a8e29367b62e

layout.tsx:

"use client";

import { I18nProviderClient } from "@/locales/client";
import { ReactNode } from "react";

type ProviderProps = {
  locale: string;
  children: ReactNode;
};

export function Provider({ locale, children }: ProviderProps) {
  return (
    <I18nProviderClient locale={locale} fallback={<p>Loading...</p>}>
      {children}
    </I18nProviderClient>
  );
}

"next-international": "^1.1.4",
"next": "14.0.3",

[QuiiBz]

Sorry for the delay, I started a new job. Could you share a minimal reproduction? I cannot reproduce the issue with the example in the repo: https://github.com/QuiiBz/next-international/tree/main/examples/next-app

[pontusab]

No worries at all! Congrats on the new job, well deserved! I will actually investigate other things like next-theme to really know what the problem is here. So I will close this and if the problem still exists after midday is open-source it will be much easier for me to showcase the issue.

Marry Christmas and happy new year!

[pontusab]

I just confirmed that it was indeed the next-themes provider, moving it down under I18nProviderClient fixed the flicker issue!

[cglacet]

Hello, doesn't this contradict this part of the documentation?

For Client Components, wrap the lowest parts of your app with I18nProviderClient inside a layout

Because the next-themes provider goes on the very top of your app (right under the root layout).

---

PS I'm having the same flicker issue.

EDIT I tried having the following structure:

root layout > next-international provider > next-theme provider > main

It seems to work properly (no blink, no error)

[QuiiBz]

That depends if next-themes can suspend too or not; next-international has a suspense boundary internally so it might be why it works when next-themes is a children of it.

[pajarrahmansyah]

In my case I use next-ui and next-theme, all of them should be inside the next-international provider. not only that, I think for every client component Just want to add a note for everyone, looking for this flicker for a full day HAHA thank god