Fix Toolbar flash (during sketchMode animation)

e2e/playwright/regression-tests.spec.ts

@@ -629,6 +629,45 @@ extrude001 = extrude(sketch001, length = 50)
       )
     })
   })
+
+  test(`Toolbar doesn't show modeling tools during sketch plane selection animation`, async ({
+    page,
+    homePage,
+    toolbar,
+  }) => {
+    const u = await getUtils(page)
+
+    await test.step('Load an empty file', async () => {
+      await page.addInitScript(async () => {
+        localStorage.setItem('persistCode', '')
+      })
+      await page.setBodyDimensions({ width: 1200, height: 500 })
+      await homePage.goToModelingScene()
+      await u.waitForPageLoad()
+    })
+
+    const toolBarMode = () =>
+      page.locator('[data-currentMode]').getAttribute('data-currentMode')
+
+    await test.step('Start sketch and select a plane', async () => {
+      await expect.poll(toolBarMode).toEqual('modeling')
+      // Click the start sketch button
+      await toolbar.startSketchPlaneSelection()
+
+      // Click on a default plane at position [700, 200]
+      await page.mouse.click(700, 200)
+
+      // Check that the modeling toolbar doesn't appear during the animation
+      // The animation typically takes around 500ms, so we'll check for 800
+      for (let i = 0; i < 8; i++) {
+        await expect.poll(toolBarMode).not.toEqual('modeling')
+        await page.waitForTimeout(100)
+      }
+
+      // After animation completes, we should see the sketching toolbar
+      await expect.poll(toolBarMode).toEqual('sketching')
+    })
+  })
 })
 
 async function clickExportButton(page: Page) {

src/Toolbar.tsx

@@ -167,7 +167,10 @@ export function Toolbar({
   }, [currentMode, disableAllButtons, configCallbackProps])
 
   return (
-    <menu className="max-w-full whitespace-nowrap rounded-b px-2 py-1 bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-30 dark:border-chalkboard-80 border-t-0 shadow-sm">
+    <menu
+      data-currentMode={currentMode}
+      className="max-w-full whitespace-nowrap rounded-b px-2 py-1 bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-30 dark:border-chalkboard-80 border-t-0 shadow-sm"
+    >
       <ul
         {...props}
         ref={toolbarButtonsRef}

src/lib/toolbar.ts

@@ -56,7 +56,12 @@ export type ToolbarItemResolved = Omit<
 export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
   modeling: {
     check: (state) =>
-      !(state.matches('Sketch') || state.matches('Sketch no face')),
+      !(
+        state.matches('Sketch') ||
+        state.matches('Sketch no face') ||
+        state.matches('animating to existing sketch') ||
+        state.matches('animating to plane')
+      ),
     items: [
       {
         id: 'sketch',
@@ -330,7 +335,10 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
   },
   sketching: {
     check: (state) =>
-      state.matches('Sketch') || state.matches('Sketch no face'),
+      state.matches('Sketch') ||
+      state.matches('Sketch no face') ||
+      state.matches('animating to existing sketch') ||
+      state.matches('animating to plane'),
     items: [
       {
         id: 'sketch-exit',