@arcote.tech/platform 0.7.8 → 0.7.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/platform",
   "type": "module",
-  "version": "0.7.8",
+  "version": "0.7.10",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Arc Platform — module system, router, layout, theme, i18n, platform app shell",
@@ -14,12 +14,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@arcote.tech/arc-ds": "^0.7.8",
-    "@arcote.tech/arc-react": "^0.7.8"
+    "@arcote.tech/arc-ds": "^0.7.10",
+    "@arcote.tech/arc-react": "^0.7.10"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.7.8",
-    "@arcote.tech/arc-otel": "^0.7.8",
+    "@arcote.tech/arc": "^0.7.10",
+    "@arcote.tech/arc-otel": "^0.7.10",
     "@lingui/core": "^5.0.0",
     "@lingui/react": "^5.0.0",
     "framer-motion": "^12.0.0",

package/src/i18n.tsx

@@ -37,6 +37,14 @@ export function I18nProvider({
     return defaultLocale;
   });
   const [messages, setMessages] = useState<Record<string, string>>({});
+  // Bez `ready` pierwszy paint renderuje aplikację z pustym `messages`
+  // (bo `loadMessages` jest async w useEffect). `<Trans>foo</Trans>` w tej
+  // klatce pokazuje surowe "foo" zamiast tłumaczenia, a po dociągnięciu
+  // katalogu odbywa się re-render z poprawnym tekstem — widoczny flash.
+  // Wstrzymanie renderu do pierwszego setMessages eliminuje flash.
+  // Gdy `locales` jest puste (brak translations skonfigurowanych),
+  // setMessages też się wywoła (z `{}`) i `ready` przejdzie na true od razu.
+  const [ready, setReady] = useState(false);
 
   const setLocale = useCallback(
     async (newLocale: string) => {
@@ -49,9 +57,11 @@ export function I18nProvider({
   );
 
   useEffect(() => {
-    setLocale(locale);
+    setLocale(locale).finally(() => setReady(true));
   }, []);
 
+  if (!ready) return null;
+
   return (
     <I18nContext.Provider value={{ locale, messages, setLocale, locales }}>
       {children}

package/src/platform-app.tsx

@@ -68,6 +68,17 @@ interface I18nConfig {
   sourceLocale: string;
 }
 
+// Empty = `/api/translations` zwróciło puste (brak translations
+// skonfigurowanych w `package.json#arc.translations`). I18nProvider działa
+// wtedy w trybie pass-through — `<Trans>` renderuje surowy tekst, switcher
+// języka się nie pokazuje, ale `useI18n()` nadal zwraca poprawny obiekt.
+const EMPTY_I18N_CONFIG: I18nConfig = { locales: {}, sourceLocale: "en" };
+
+// `null` = jeszcze nie wiadomo czy translations są skonfigurowane (fetch
+// trwa). PlatformAppInner czeka na `null → config` żeby zmountować
+// I18nProvider RAZ z właściwymi propsami; locale state w providerze jest
+// w useState bez sync z propsami, więc remount po zmianie propsów
+// wprowadziłby dodatkowy flash.
 function useI18nConfig(apiUrl: string): I18nConfig | null {
   const [config, setConfig] = useState<I18nConfig | null>(null);
 
@@ -80,9 +91,11 @@ function useI18nConfig(apiUrl: string): I18nConfig | null {
           const localesMap: Record<string, string> = {};
           for (const l of data.locales) localesMap[l] = l;
           setConfig({ locales: localesMap, sourceLocale: data.sourceLocale });
+        } else {
+          setConfig(EMPTY_I18N_CONFIG);
         }
       })
-      .catch(() => {});
+      .catch(() => setConfig(EMPTY_I18N_CONFIG));
   }, [apiUrl]);
 
   return config;
@@ -139,31 +152,30 @@ function PlatformAppInner({
     [apiUrl],
   );
 
-  let inner = (
-    <ThemeProvider>
-      <DesignSystemProvider
-        variants={{ ...getVariantOverrides(), ...variants }}
-      >
-        <TooltipProvider>
-          <ArcLayoutProvider>{content}</ArcLayoutProvider>
-        </TooltipProvider>
-      </DesignSystemProvider>
-    </ThemeProvider>
+  // Czekamy na pierwszą odpowiedź `/api/translations` — wtedy montujemy
+  // I18nProvider RAZ z właściwymi propsami (real locales albo
+  // pass-through). Gwarantuje to że `useI18n()` zawsze ma kontekst, a
+  // texty `<Trans>` nigdy nie flashują surową wartością przed tłumaczeniem.
+  if (!i18nConfig) return null;
+
+  const inner = (
+    <I18nProvider
+      defaultLocale={i18nConfig.sourceLocale}
+      locales={i18nConfig.locales}
+      loadMessages={loadMessages}
+    >
+      <ThemeProvider>
+        <DesignSystemProvider
+          variants={{ ...getVariantOverrides(), ...variants }}
+        >
+          <TooltipProvider>
+            <ArcLayoutProvider>{content}</ArcLayoutProvider>
+          </TooltipProvider>
+        </DesignSystemProvider>
+      </ThemeProvider>
+    </I18nProvider>
   );
 
-  // Wrap with I18nProvider if translations are configured
-  if (i18nConfig) {
-    inner = (
-      <I18nProvider
-        defaultLocale={i18nConfig.sourceLocale}
-        locales={i18nConfig.locales}
-        loadMessages={loadMessages}
-      >
-        {inner}
-      </I18nProvider>
-    );
-  }
-
   return (
     <ModelProvider>
       <PlatformModelProvider