@lovalingo/lovalingo 0.5.7 → 0.5.9

package/dist/components/LovalingoProvider.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { LovalingoContext } from '../context/LovalingoContext';
 import { LangRoutingContext } from '../context/LangRoutingContext';
 import { LovalingoAPI } from '../utils/api';
@@ -15,6 +15,8 @@ import { LanguageSwitcher } from './LanguageSwitcher';
 const LOCALE_STORAGE_KEY = 'Lovalingo_locale';
 const LOADING_BG_STORAGE_PREFIX = "Lovalingo_loading_bg_color";
 const BRANDING_STORAGE_PREFIX = "Lovalingo_branding_enabled";
+// Why: run initial load before first paint on the client to avoid a prehide flash; useEffect on SSR.
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 export const LovalingoProvider = ({ children, apiKey: apiKeyProp, publicAnonKey, defaultLocale, locales, apiBase = 'https://cdn.lovalingo.com', routing = 'path', // Default to path mode (SEO-friendly, recommended)
 autoPrefixLinks = true, overlayBgColor, autoApplyRules = true, switcherPosition = 'bottom-right', switcherOffsetY = 20, switcherTheme = 'dark', editMode: initialEditMode = false, editKey = 'KeyE', pathNormalization = { enabled: true }, // Enable by default
 mode = 'dom', // Default to legacy DOM mode for backward compatibility
@@ -524,7 +526,7 @@ navigateRef, // For path mode routing
         detectLocaleRef.current = detectLocale;
     }, [detectLocale]);
     // Initialize
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         const initialLocale = detectLocaleRef.current();
         lastNormalizedPathRef.current = processPath(window.location.pathname, enhancedPathConfig);
         // Track initial page (fallback discovery for pages not present in the routes feed).

package/dist/hooks/provider/useBundleLoading.js

@@ -168,6 +168,18 @@ export function useBundleLoading({ apiRef, resolvedApiKey, defaultLocale, routin
         logDebug(`[Lovalingo] Fetching translations for ${targetLocale} on ${normalizedPath}`);
         setIsLoading(true);
         enablePrehide(getCachedLoadingBgColor());
+        let revealedEarly = false;
+        const revealNow = () => {
+            if (revealedEarly)
+                return;
+            revealedEarly = true;
+            disablePrehide();
+            setIsLoading(false);
+            if (loadingFailsafeTimeoutRef.current != null) {
+                window.clearTimeout(loadingFailsafeTimeoutRef.current);
+                loadingFailsafeTimeoutRef.current = null;
+            }
+        };
         // Why: never keep the app hidden/blocked for longer than the UX budget; show the original content if translations aren't ready fast.
         loadingFailsafeTimeoutRef.current = window.setTimeout(() => {
             disablePrehide();
@@ -192,7 +204,7 @@ export function useBundleLoading({ apiRef, resolvedApiKey, defaultLocale, routin
                 if (mode === "dom") {
                     applyActiveTranslations(document.body);
                 }
-                disablePrehide();
+                revealNow();
                 revealedViaCachedCritical = true;
             }
             const bootstrap = await apiRef.current.fetchBootstrap(targetLocale, currentPath);
@@ -238,6 +250,8 @@ export function useBundleLoading({ apiRef, resolvedApiKey, defaultLocale, routin
                 if (mode === "dom") {
                     applyActiveTranslations(document.body);
                 }
+                // Why: once we have a deterministic critical slice, unblock the page immediately and keep remaining work in the background.
+                revealNow();
             }
             if (autoApplyRules) {
                 const bootstrapDomRules = bootstrap?.dom_rules;
@@ -286,7 +300,7 @@ export function useBundleLoading({ apiRef, resolvedApiKey, defaultLocale, routin
                     }
                 })();
             }
-            disablePrehide();
+            revealNow();
             // Delayed retry scan to catch late-rendering content
             retryTimeoutRef.current = setTimeout(() => {
                 // Don't scan if we're navigating (prevents React conflicts)

package/dist/hooks/provider/usePrehide.d.ts

@@ -1,4 +1,4 @@
-export declare const PREHIDE_FAILSAFE_MS = 1700;
+export declare const PREHIDE_FAILSAFE_MS = 900;
 export declare function usePrehide(): {
     enablePrehide: (bgColor: string) => void;
     disablePrehide: () => void;

package/dist/hooks/provider/usePrehide.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
-// Why: avoid long blank screens on blocked/untranslated routes by always revealing the original page quickly.
-export const PREHIDE_FAILSAFE_MS = 1700;
+// Why: keep the no-flash "prehide" budget tight to improve FCP while still preventing perma-hide.
+export const PREHIDE_FAILSAFE_MS = 900;
 export function usePrehide() {
     const prehideStateRef = useRef({
         active: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovalingo/lovalingo",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "description": "React translation runtime with i18n routing, deterministic bundles + DOM rules, and zero-flash rendering.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",