Flickering of translations

[jonasvle]

When loading/reloading the page, the translations are not shown for a short instant causing a flicker. A fallback and fallbackLocale is used, but seems to be not used.

Here is a video of the issue along with the minimal code to reproduce this:
https://github.com/user-attachments/assets/6408bac7-6e4b-4c3f-9bbf-31b799430660

I18nProvider.tsx:

'use client';

import { I18nProviderClient } from '@/locales/client';

import en from '../locales/en.json';

export default function I18nProvider({
  locale,
  children,
}: Readonly<{
  locale: string;
  children: React.ReactNode;
}>) {
  return (
    <I18nProviderClient
      locale={locale}
      fallback={<p>Loading...</p>}
      fallbackLocale={en}
    >
      {children}
    </I18nProviderClient>
  );
}

page.tsx:

import ClientComponent from '@/app/[locale]/test/components/ClientComponent';

export default async function Page() {
  return <ClientComponent />;
}

ClientComponent.tsx:

'use client';

import Link from 'next/link';

import { useI18n } from '@/locales/client';

export default function ClientComponent() {
  const t = useI18n();

  return (
    <p>
      {t('paragraph-content', {
        link: (
          <Link href="#" className="underline">
            {t('paragraph-link')}
          </Link>
        ),
      })}
    </p>
  );
}

I would expect either the fallback component to be rendered or the fallbackLocale to be used, but instead no labels are shown.

• next-international version 1.3.1
• Next.js version 15.0.3