lingodotdev
feat: Add React Suspense support to LingoProvider for better loading experience
What
LingoProvider currently shows a blank screen while the dictionary loads. There are TODOs in the codebase suggesting Suspense should handle this, but it hasn’t been implemented yet.
This change adds proper Suspense support so loading states can be handled cleanly instead of returning null.
Why
Right now, users see nothing while the dictionary is loading. It’s jarring, especially on slower connections. Using React Suspense gives us a cleaner pattern for handling async loading, improves perceived performance, and aligns the provider with modern React behavior.
How
- Update LingoProvider to use the Suspense pattern when the dictionary isn’t ready
- Add a wrapper that supports a fallback component
- Include a simple default fallback UI
- Make sure this works well with SSR and streaming
- Add tests and update examples
If this approach makes sense, I’m happy to take ownership of the implementation and open a PR once approved. 🙌
Happy to take this on if approved, please assign the issue to me. @sumitsaurabh927
i have used react suspense to show skeleton loading before. I am happy to take on this issue.
@Akcthecoder200 FYI it's best to wait until you are assigned to an issue before you open a PR for it.
Looks like someone’s already working on this. I’ll keep an eye on the PR in case any testing or review help is needed.
IMO something like a fallback prop would be better. But let's see what the team thinks.
cc @maxprilutskiy
Hey @sumitsaurabh927 , I created the PR : https://github.com/lingodotdev/lingo.dev/pull/1534
Please review and merge :)
