refactor(i18next): streamline fallback translation handling and initialization

web/i18n/i18next-config.ts

@@ -55,19 +55,32 @@ export const loadLangResources = async (lang: string) => {
   }
 }
 
-i18n.use(initReactI18next)
-  .init({
-    lng: undefined,
-    fallbackLng: 'en-US',
-  })
+const getFallbackTranslation = () => {
+  const resources = NAMESPACES.reduce((acc, ns, index) => {
+    acc[camelCase(NAMESPACES[index])] = require(`./en-US/${ns}`).default
+    return acc
+  }, {} as Record<string, any>)
+  return {
+    translation: resources,
+  }
+}
+
+if (!i18n.isInitialized) {
+  i18n.use(initReactI18next)
+    .init({
+      lng: undefined,
+      fallbackLng: 'en-US',
+      resources: {
+        'en-US': getFallbackTranslation(),
+      },
+    })
+}
 
 export const changeLanguage = async (lng?: string) => {
   const resolvedLng = lng ?? 'en-US'
-  const resources = {
-    [resolvedLng]: await loadLangResources(resolvedLng),
-  }
+  const resource = await loadLangResources(resolvedLng)
   if (!i18n.hasResourceBundle(resolvedLng, 'translation'))
-    i18n.addResourceBundle(resolvedLng, 'translation', resources[resolvedLng].translation, true, true)
+    i18n.addResourceBundle(resolvedLng, 'translation', resource.translation, true, true)
   await i18n.changeLanguage(resolvedLng)
 }