i18n useTranslation().t wrapper with placeholder loader from MUI

Lan.tsx

import { Skeleton } from '@mui/material';
import { useTranslation } from 'next-i18next';
import * as React from 'react';

export interface Props {
  textId: string;
  width?: string;
}

/**
 * Wrap `userTranslation().t` object of i18n. Shows a loading placeholder
 * until the translation resources are ready.
 * 
 * ## Usage
 * 
 * Sample:
 * 
 * ```html
 * <Lan textId='web.waiting.home.eventNotStartedDetails.upcomingEvent' />
 * ```
 *
 * @returns string
 */
function Lan({ textId, width }: Props) {
  const { t, ready } = useTranslation();

  const lastLength = (strArr: string[]) => (strArr[strArr.length - 1].length);
  const defaultWidth = 12 * (lastLength(textId.split('.')) || 1);

  return <span>{ready ? t(textId) : <Skeleton variant="text" width={width || defaultWidth} />}</span>;
}

export default Lan;