Lazy load language picker

[imnasnainaec]

Resolves #3987

Lazy loads the 5+ MB language picker bundle piece, so it won't load for most user sessions.

---

Current "Create Project"

Without LIFT file selected

With LIFT file selected

---

Updated "Create Project"

When no project name is typed and no LIFT file is selected:

When a project name is typed first:

When a LIFT file is selected first:

---

This change is 

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.60%. Comparing base (675d6d7) to head (ea9f5eb).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3999      +/-   ##
==========================================
+ Coverage   74.57%   74.60%   +0.03%     
==========================================
  Files         291      293       +2     
  Lines       10814    10818       +4     
  Branches     1354     1354              
==========================================
+ Hits         8064     8071       +7     
+ Misses       2358     2352       -6     
- Partials      392      395       +3     

Flag	Coverage Δ
backend	85.45% <ø> (ø)
frontend	66.26% <100.00%> (+0.07%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[imnasnainaec]

Bundle before and after:

master

...
dist\whiteText.f65961a3.png                        32 kB    933ms
dist\AppLoggedIn.e0f7bf19.js                 ⚠️  5.23 MB    2.27s
dist\BaseGoalScreen.557fe1bf.js                  4.06 kB    892ms
...

loadable-language-picker

...
dist\whiteText.f65961a3.png                           32 kB    933ms
dist\AppLoggedIn.7c95fca4.js                      220.79 kB    433ms
dist\LanguagePickerWithOptionalT.d0b2d9a6.js       ⚠️  5 MB    949ms
dist\LanguagePickerWithOptionalT.5c368841.js        7.96 kB    484ms
dist\BaseGoalScreen.87c6a03e.js                     4.13 kB    466ms
...

[jasonleenaylor]

src/components/LanguagePicker/LanguagePickerWithOptionalT.tsx line 10 at r1 (raw file):

/** This component wraps LanguagePicker to make the 't' prop optional,
 * providing English strings as the default. */
export default function LanguagePickerWithOptionalT(

How about LoadableLanguagePicker? When we provide translations it will be internal to this method, so the name should reflect the usage.

[jasonleenaylor]

src/components/ProjectScreen/tests/CreateProject.test.tsx line 104 at r1 (raw file):

    // Hides language pickers until project name is typed.
    expect(screen.queryByTestId(mockLangPickerId)).toBeNull();
    await userEvent.type(screen.getByRole("textbox"), "non-empty-name");

Please make a new test for this behavior.

Code quote:

  it("disables language picker(s) when file selected", async () => {
    // Hides language pickers until project name is typed.
    expect(screen.queryByTestId(mockLangPickerId)).toBeNull();
    await userEvent.type(screen.getByRole("textbox"), "non-empty-name");

[jasonleenaylor]

@jasonleenaylor reviewed 5 of 5 files at r1, 6 of 6 files at r2, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @imnasnainaec)