How to prevent flashing keys of translation when first load a page #147

juniorforlife · 2023-09-05T15:35:13Z

juniorforlife
Sep 5, 2023

As you can see in the video, the keys flash for a moment before displaying the translations. How do I fix this?

record.mov

My configs

root.tsx

export const loader: LoaderFunction = async ({ request }) => {
  const auth = await getAuthDataFromCookie(request);
  
  if (auth?.user.lang) {
   // use user's selected language from the backend if any
    const { lang } = auth.user;
    return json({ auth, lang });
  } else {
   // if not use lang from localStorage or browser settings
    return json({
      auth,
      lang: await i18next.getLocale(request),
    });
  }
};
export default function App() {
  let { lang } = useLoaderData<typeof loader>();
  let { i18n } = useTranslation();

  useChangeLanguage(lang);

  return (
    <html lang={lang} dir={i18n.dir()}>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

i18next.server.ts

import Backend from "i18next-fs-backend";
import { resolve } from "node:path";
import { RemixI18Next } from "remix-i18next";
import { i18nCookie } from "~/cookie";
import i18n from "~/i18n"; // your i18n configuration file

let i18next = new RemixI18Next({
  detection: {
    supportedLanguages: i18n.supportedLngs,
    fallbackLanguage: i18n.fallbackLng,
    cookie: i18nCookie,
    order: ["cookie", "header"],
  },
  // This is the configuration for i18next used
  // when translating messages server-side only
  i18next: {
    ...i18n,
    backend: {
      loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
    },
  },
  // The backend you want to use to load the translations
  backend: Backend,
});

export default i18next;

entry.server.tsx

import { PassThrough } from "stream";
import type { EntryContext } from "@remix-run/node";
import { Response } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import isbot from "isbot";
import { renderToPipeableStream } from "react-dom/server";
import { createInstance } from "i18next";
import { I18nextProvider, initReactI18next } from "react-i18next";
import Backend from "i18next-fs-backend";

import i18n from "./i18n"; // your i18n configuration file
import i18next from "./i18next.server";
import { resolve } from "node:path";

const ABORT_DELAY = 5000;

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  let callbackName = isbot(request.headers.get("user-agent"))
    ? "onAllReady"
    : "onShellReady";

  let instance = createInstance();
  let lng = await i18next.getLocale(request);
  let ns = i18next.getRouteNamespaces(remixContext);

  await instance
    .use(initReactI18next)
    .use(Backend)
    .init({
      ...i18n,
      lng, // The locale we detected above
      ns, // The namespaces the routes about to render wants to use
      backend: {
        loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
        requestOptions: {
          cache: "no-cache",
          // cache: process.env.NODE_ENV === "production" ? "default" : "no-cache",
        },
      },
    });

  return new Promise((resolve, reject) => {
    let didError = false;

    let { pipe, abort } = renderToPipeableStream(
      <I18nextProvider i18n={instance}>
        <RemixServer context={remixContext} url={request.url} />
      </I18nextProvider>,
      {
        [callbackName]: () => {
          let body = new PassThrough();

          // responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(body, {
              headers: responseHeaders,
              status: didError ? 500 : responseStatusCode,
            })
          );

          pipe(body);
        },
        onShellError(error: unknown) {
          reject(error);
        },
        onError(error: unknown) {
          didError = true;

          console.error(error);
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

entry.client.tsx


import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { I18nextProvider, initReactI18next } from "react-i18next";
import i18next from "i18next";
import Backend from "i18next-http-backend";
import { getInitialNamespaces } from "remix-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

import i18n from "./i18n";

// https://github.com/sergiodxa/remix-i18next#client-side-configuration
async function hydrate() {
  await i18next
    .use(initReactI18next)
    .use(LanguageDetector)
    .use(Backend)
    .init({
      ...i18n,
      ns: getInitialNamespaces(),
      backend: {
        loadPath: "/locales/{{lng}}/{{ns}}.json",
        requestOptions: { cache: "no-cache" },
      },
      detection: {
        order: ["htmlTag"],
        caches: [],
      },
    });

  startTransition(() => {
    hydrateRoot(
      document,
      <I18nextProvider i18n={i18next}>
        <StrictMode>
          <RemixBrowser />
        </StrictMode>
      </I18nextProvider>
    );
  });
}

if (window.requestIdleCallback) {
  window.requestIdleCallback(hydrate);
} else {
  // Safari doesn't support requestIdleCallback
  // https://caniuse.com/requestidlecallback
  window.setTimeout(hydrate, 1);
}

sergiodxa · 2023-09-05T21:16:49Z

sergiodxa
Sep 5, 2023
Maintainer

This happens when the i18next backend used server-side is not able to find the translation files.

Another option is that you're using auth.user.lang in the root loader but in entry.server you're only using i18next.getLocale(request), you should detect the language the same way in both places, otherwise it's possible that on SSR it will use the locale from i18next.getLocale but then once the app hydrates the useChangeLanguage(lang) hook will run and set it to what the root loader returned, which can be auth.user.lang.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to prevent flashing keys of translation when first load a page #147

{{title}}

Replies: 1 comment

{{title}}

Select a reply

How to prevent flashing keys of translation when first load a page #147

juniorforlife Sep 5, 2023

Replies: 1 comment

sergiodxa Sep 5, 2023 Maintainer

juniorforlife
Sep 5, 2023

sergiodxa
Sep 5, 2023
Maintainer