Fix project settings loading in browser (#5694)

Fixes #5625. #5142 regressed the project settings loading because it
failed to fire off a new `load.project` XState event in the case where
we were loading in the browser. It also may have had a bug with project
settings loading on refresh from the file page, as we were not properly
ensuring that the `settingsActor` was in the `idle` state before sending
our `load.project` event regardless.

e2e/playwright/fixtures/toolbarFixture.ts

@@ -28,7 +28,6 @@ export class ToolbarFixture {
   rectangleBtn!: Locator
   lengthConstraintBtn!: Locator
   exitSketchBtn!: Locator
-  editSketchBtn!: Locator
   fileTreeBtn!: Locator
   createFileBtn!: Locator
   fileCreateToast!: Locator
@@ -61,7 +60,6 @@ export class ToolbarFixture {
     this.rectangleBtn = page.getByTestId('corner-rectangle')
     this.lengthConstraintBtn = page.getByTestId('constraint-length')
     this.exitSketchBtn = page.getByTestId('sketch-exit')
-    this.editSketchBtn = page.locator('[name="Edit Sketch"]')
     this.fileTreeBtn = page.locator('[id="files-button-holder"]')
     this.createFileBtn = page.getByTestId('create-file-button')
     this.treeInputField = page.getByTestId('tree-input-field')
@@ -71,6 +69,10 @@ export class ToolbarFixture {
     this.fileCreateToast = page.getByText('Successfully created')
   }
 
+  get editSketchBtn() {
+    return this.page.locator('[name="Edit Sketch"]')
+  }
+
   get logoLink() {
     return this.page.getByTestId('app-logo')
   }

src/lib/routeLoaders.ts

@@ -6,6 +6,7 @@ import { BROWSER_PATH } from 'lib/paths'
 import {
   BROWSER_FILE_NAME,
   BROWSER_PROJECT_NAME,
+  FILE_EXT,
   PROJECT_ENTRYPOINT,
 } from 'lib/constants'
 import { loadAndValidateSettings } from './settings/settingsUtils'
@@ -16,6 +17,7 @@ import { getProjectInfo } from './desktop'
 import { normalizeLineEndings } from 'lib/codeEditor'
 import { OnboardingStatus } from '@rust/kcl-lib/bindings/OnboardingStatus'
 import { getSettings, settingsActor } from 'machines/appMachine'
+import { waitFor } from 'xstate'
 
 export const telemetryLoader: LoaderFunction = async ({
   params,
@@ -107,6 +109,8 @@ export const fileLoader: LoaderFunction = async (
     const project = maybeProjectInfo ?? defaultProjectData
 
     // Fire off the event to load the project settings
+    // once we know it's idle.
+    await waitFor(settingsActor, (state) => state.matches('idle'))
     settingsActor.send({
       type: 'load.project',
       project,
@@ -127,13 +131,33 @@ export const fileLoader: LoaderFunction = async (
     }
   }
 
-  return {
+  const project = {
-    code,
-    project: {
     name: BROWSER_PROJECT_NAME,
-      path: '/' + BROWSER_PROJECT_NAME,
+    path: `/${BROWSER_PROJECT_NAME}`,
+    children: [
+      {
+        name: `${BROWSER_FILE_NAME}.${FILE_EXT}`,
+        path: BROWSER_PATH,
         children: [],
       },
+    ],
+    default_file: BROWSER_FILE_NAME,
+    directory_count: 0,
+    kcl_file_count: 1,
+    metadata: null,
+  }
+
+  // Fire off the event to load the project settings
+  // once we know it's idle.
+  await waitFor(settingsActor, (state) => state.matches('idle'))
+  settingsActor.send({
+    type: 'load.project',
+    project,
+  })
+
+  return {
+    code,
+    project,
     file: {
       name: BROWSER_FILE_NAME,
       path: decodeURIComponent(BROWSER_PATH),