There will be a flicker when using internationalization

[Mr-Nobody-li]

Describe the bug There will be a flicker when using internationalization

code as follows

"use client";
function Header() {
  const t = useI18n();
  const items: TabsProps["items"] = [
    {
      key: "产品中心",
      label: <Link href="/products">{t("chanPinZhongXin")}</Link>,
    },
    {
      key: "服务支持",
      label: <Link href="/serviceSupports">{t("fuWuZhiChi")}</Link>,
    },
    {
      key: "解决方案",
      label: <Link href="/solutions">{t("jieJueFangAn")}</Link>,
    },
    {
      key: "关于我们",
      label: <Link href="/aboutUs">{t("guanYuWoMen")}</Link>,
    },
  ];
  return (
    <div className="text-red-500 flex justify-between">
      <Image src="/images/logo.png" width={100} height={30} alt="" />
      <Tabs
        className={style.tab}
        activeKey="1"
        items={items}
        onChange={onChange}
      />
      <div></div>
    </div>
  );
}

export default Header;

// locales/client
import { createI18nClient } from "next-international/client";

export const { useI18n, useScopedI18n, I18nProviderClient } = createI18nClient({
  en: () => import("./en.json"),
  zh: () => import("./zh-CN.json"),
});

Expected behavior When you can see the page, internationalization is already loaded

About (please complete the following information):

• next-international version [1.0.1]
• Next.js version [13.4.0]

[QuiiBz]

You can use the fallback or fallbackLocale prop on I18nProvider to avoid the flicker (that happens when we're loading the locale on the client):

• fallback accepts a React component to show instead of the children while the locale isn't loaded
• fallbackLocale accepts a whole locale file that will be used while the locale isn't loaded

See the example here: https://github.com/QuiiBz/next-international/blob/b30e664ace0f0d470b0a5b2754e0f47e93b45040/examples/next-app/app/%5Blocale%5D/client/layout.tsx#L9

[Mr-Nobody-li]

thanks , that works for me