feat: add custom fallback UI and loading spinner for LingoProviderWrapper
#The Problem(#1305) LingoProvider was showing a blank screen while the dictionary loaded because it returned null during loading. There were even TODO comments in the code suggesting Suspense should handle this, but it wasn't implemented. This created a poor user experience, especially on slower connections.
#The Solution We implemented proper React Suspense support in LingoProviderWrapper:
#Key Changes: Replaced the old pattern - Instead of using useState/useEffect and returning null, we now throw promises to trigger Suspense Added a default loading UI - Created a DefaultLoadingFallback component with a spinner and "Loading translations..." text Made it customizable - Added an optional fallback prop so developers can provide custom loading UI Implemented caching - Dictionary and loading promises are cached to avoid redundant requests
#How it works: When loading starts, the component throws a promise React's Suspense catches it and shows the fallback UI When the promise resolves, the dictionary is cached On re-render, the cached dictionary is used and children render normally
#Benefits ✅ Users see a professional loading spinner instead of a blank screen ✅ Follows modern React patterns with Suspense ✅ Backwards compatible - existing code works without changes ✅ Customizable fallback UI ✅ All tests pass (73/73)
#Files Changed provider.tsx - Main implementation with Suspense provider.spec.tsx - Updated tests