fix: preload English translations to eliminate i18n skeleton loaders

[mdayan8]

Problem

The Pages Router shows skeleton loaders on every navigation while waiting for a tRPC query to fetch translation strings. This creates a jarring flicker where the entire UI flashes skeleton placeholders before content appears — especially noticeable on initial load and locale switches.

The CustomI18nextProvider fires a tRPC viewer.i18n.get query, and while it's pending, pageProps.i18n is undefined. Since appWithTranslation has no resources, isLocaleReady is false, and every component checking it renders skeleton loaders.

Solution

English fallback preload: Load en/common.json at module level (it's a static JSON asset already bundled by webpack) and format it as an SSRConfig fallback. This means translation data is available on the very first render — no skeleton needed.

Per-locale cache: Cache tRPC i18n results in a Map<string, SSRConfig> keyed by locale. Switching back to a previously-visited locale is instant, no network request wait.

Together these ensure isLocaleReady is always true from the first render.

How it works

The priority chain is:
tRPC data -> pageProps.i18n -> locale cache -> English fallback

When the tRPC query resolves, its locale-specific data replaces the English fallback seamlessly. This mirrors what mergeWithEnglishFallback already does on the server.

Related

Relevant to the issue described in #9840 and RFC #10198. App Router already handles this correctly (preloads in layout.tsx). This brings the same guarantee to the Pages Router.

[github-actions]

Welcome to Cal.diy, @mdayan8! Thanks for opening this pull request.

A few things to keep in mind:

• This is Cal.diy, not Cal.com. Cal.diy is a community-driven, fully open-source fork of Cal.com licensed under MIT. Your changes here will be part of Cal.diy — they will not be deployed to the Cal.com production app.
• Please review our Contributing Guidelines if you haven't already.
• Make sure your PR title follows the Conventional Commits format.

A maintainer will review your PR soon. Thanks for contributing!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2f4836c3-8d9a-421e-acb4-5dd006d5ef87

📥 Commits

Reviewing files that changed from the base of the PR and between 605b113 and aea9b21.

📒 Files selected for processing (1)

• apps/web/lib/app-providers.tsx

---

📝 Walkthrough

Walkthrough

This PR preloads English i18n from common.json at module load, adds an in-memory per-locale i18nCache, and updates CustomI18nextProvider to store fetched clientViewerI18n into the cache. i18n selection now prefers fresh clientViewerI18n, then props.pageProps.i18n, then i18nCache[locale], and finally the englishFallback.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: preloading English translations to eliminate skeleton loaders during i18n transitions.
Description check	✅ Passed	The description is directly related to the changeset, clearly explaining the problem, solution, and implementation details of the i18n preload optimization.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web/lib/app-providers.tsx`:
- Around line 129-131: The render currently mutates module-level i18nCache
(calling i18nCache.set(locale, clientViewerI18n.data.i18n)) inside the component
render; move that write into a useEffect so CustomI18nextProvider (or the
component exporting clientViewerI18n/locale) remains pure—add a useEffect that
depends on locale and clientViewerI18n.data?.i18n and perform i18nCache.set(...)
inside it, and remove the i18nCache.set call from the render path.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d35bec02-487b-4848-afb3-12d701ccf47d

📥 Commits

Reviewing files that changed from the base of the PR and between 180ede2 and 605b113.

📒 Files selected for processing (1)

• apps/web/lib/app-providers.tsx

[CLAassistant]

All committers have signed the CLA.

[mdayan8]

@AminDhouib Thanks for the clarification. I appreciate the response and understand the project's contribution workflow. Thanks for taking the time to review it. Wishing the team continued success with the project!