[I18nProviderClient] Display fallbackLocale values instead of raw locales keys?

gustaveWPM commented 11 months ago

Hello. I was expecting the I18nProviderClient to "Fallback" on the fallbackLocale values during the loading phase, instead of showing raw locales keys. (In practical terms, it doesn't really matter since I've set up a Splash Screen during this loading phase.)

Raw locales keys

I just find this behavior rather curious. Maybe I've misunderstood something and it's coming from my code?

// @/i18n/locales/fr
export default {
  _infos: {
    lng: 'fr',
    label: 'Français'
  },

  navbar: {
    home: 'Accueil',
    dashboard: 'Dashboard'
    // * ...
  }
} as const;

// lib/misc/getEnumsKeys.ts
export const getEnumKeys = (e: object): string[] => Object.keys(e).filter((key) => isNaN(Number(key)));

// config/i18n.ts
import defaultLanguage from '@/i18n/locales/fr';
export type VocabBase = typeof defaultLanguage;
export enum ELanguagesFlag {
  fr,
  en
}

export const DEFAULT_LANGUAGE = defaultLanguage._infos.lng;
export const LANGUAGES: LanguageFlag[] = getEnumKeys(ELanguagesFlag) as LanguageFlag[];

export { defaultLanguage as fallbackLocale };

// src/app/[locale]/layout.tsx
<I18nProviderClient {...fallbackLocale}>
  <html lang={useCurrentLocale()}>
    <body className="flex flex-col h-screen w-full p-0 m-0">
      <SplashScreen />
      <NextTopLoader {...{ ...ProgressbarConfig.PROPS }} />
      <SitewideNavbar />
      {children}
    </body>
  </html>
</I18nProviderClient>;

// middleware.ts
const I18nMiddleware = createI18nMiddleware({
  locales: LANGUAGES,
  defaultLocale: DEFAULT_LANGUAGE,
  urlMappingStrategy: 'rewriteDefault'
});

https://github.com/Tirraa/dashboard_rtm/tree/6e8d75e0ad79d6dc9b8d1bd6bed4671193d9ada0

EDIT: I was misusing the spread operator.

<I18nProviderClient {...{ fallbackLocale }}> // * ... Oops! Initially wrote: <I18nProviderClient {...fallbackLocale}>

It was totally my fault.

gustaveWPM commented 11 months ago

QuiiBz commented 11 months ago

Thanks for the reproduction. I've just tried and the issue appears to be because of the spread of fallbackLocale. Inlining fallbackLocale={fallbackLocale} works as expected, and shows this locale immediately:

Feel free to re-open if needed!

gustaveWPM commented 11 months ago

Haha, that's funny! I'll try it rn. Thank you a lot. Sorry to have misused the I18nProviderClient.

gustaveWPM commented 11 months ago

It has fixed my problem, thank you.

gustaveWPM commented 11 months ago

I was misusing the spread operator.

<I18nProviderClient {...{ fallbackLocale }}> // * ... Oops! Initially wrote: <I18nProviderClient {...fallbackLocale}>

This works exactly as:

<I18nProviderClient fallbackLocale={fallbackLocale}>

It was totally my fault. (I hate repeating the field name with the x={x} syntax, but this time, I have epic failed, HAHA).

QuiiBz / next-international

[I18nProviderClient] Display fallbackLocale values instead of raw locales keys? #191