fix: Fix dynamic loading for i18n messages

Author: CrawlerCode

src/provider/IntlProvider.tsx

@@ -1,6 +1,6 @@
 import { setDefaultOptions } from "date-fns";
 import flatpickr from "flatpickr";
-import React, { useEffect, useState } from "react";
+import React, { ComponentProps, useEffect, useState } from "react";
 import { IntlProvider as ReactIntlProvider } from "react-intl";
 import useSettings from "../hooks/useSettings";
 
@@ -11,7 +11,6 @@ import { english as flatpickrEN } from "flatpickr/dist/l10n/default";
 import { French as flatpickrFR } from "flatpickr/dist/l10n/fr.js";
 import { Russian as flatpickrRU } from "flatpickr/dist/l10n/ru.js";
 
-// eslint-disable-next-line react-refresh/only-export-components
 export const LANGUAGES = ["en", "de", "ru", "fr"] as const;
 
 type Language = (typeof LANGUAGES)[number];
@@ -30,11 +29,12 @@ const IntlProvider = ({ children }: PropTypes) => {
     locale = LANGUAGES.find((lang) => settings.language === lang) ?? "en";
   }
 
-  const [messages, setMessages] = useState(messagesEN);
+  const [messages, setMessages] = useState<Partial<Record<Language, ComponentProps<typeof ReactIntlProvider>["messages"]>>>({ en: messagesEN });
 
   useEffect(() => {
     (async () => {
-      setMessages((await import(`../lang/${locale}.json`)).default);
+      const messages = (await import(`../lang/${locale}.json`)).default;
+      setMessages((prev) => ({ ...prev, [locale]: messages }));
 
       setDefaultOptions({
         locale: (await import("date-fns/locale"))[locale === "en" ? "enUS" : locale],
@@ -62,7 +62,7 @@ const IntlProvider = ({ children }: PropTypes) => {
   }, [locale]);
 
   return (
-    <ReactIntlProvider locale={locale} messages={messages}>
+    <ReactIntlProvider locale={locale} messages={messages[locale] ?? messagesEN}>
       {children}
     </ReactIntlProvider>
   );