on second thought just show the connecting thing when starting

Author: david-crespo

app/pages/project/instances/instance/SerialConsolePage.tsx

@@ -147,9 +147,16 @@ export function SerialConsolePage() {
       </Link>
 
       <div className="gutter relative w-full shrink grow overflow-hidden">
-        {connectionStatus === 'connecting' && <ConnectingSkeleton />}
+        {
+          // show connecting state if we are either actually connecting (which
+          // is usually extremely quick) or waiting for the instance to start
+          (connectionStatus === 'connecting' ||
+            (connectionStatus === 'closed' && isStarting(instanceData))) && (
+            <ConnectingSkeleton />
+          )
+        }
         {connectionStatus === 'error' && <ErrorSkeleton />}
-        {connectionStatus === 'closed' && !canConnect && (
+        {connectionStatus === 'closed' && !canConnect && !isStarting(instanceData) && (
           <CannotConnect instance={instanceData} />
         )}
         {/* closed && canConnect shouldn't be possible because there's no way to
@@ -222,10 +229,8 @@ const CannotConnect = ({ instance }: { instance: Instance }) => (
       <span>The instance is </span>
       <InstanceStatusBadge className="ml-1.5" status={instance.runState} />
     </p>
-    <p className="mt-2 text-center text-secondary">
-      {isStarting(instance)
-        ? 'We will try to connect as soon as the instance starts.'
-        : 'You can only connect to the serial console on a running instance.'}
+    <p className="mt-2 text-balance text-center text-secondary">
+      You can only connect to the serial console on a running instance.
     </p>
   </SerialSkeleton>
 )

test/e2e/instance-serial.e2e.ts

@@ -21,12 +21,10 @@ test('serial console can connect while starting', async ({ page }) => {
   await page.getByRole('tab', { name: 'Connect' }).click()
   await page.getByRole('link', { name: 'Connect' }).click()
 
-  // The message goes from creating to starting and then disappears once
-  // the instance is running
-  await expect(page.getByText('The instance is creating')).toBeVisible()
-  await expect(page.getByText('We will try to connect')).toBeVisible()
-  await expect(page.getByText('The instance is starting')).toBeVisible()
-  await expect(page.getByText('The instance is')).toBeHidden()
+  // "Connecting" displays and then disappears once the instance is running
+  const connecting = page.getByText('Connecting to serial console')
+  await expect(connecting).toBeVisible()
+  await expect(connecting).toBeHidden()
 
   // Here it would be nice to test that the serial console connects, but we
   // can't mock websockets with MSW yet: https://github.com/mswjs/msw/pull/2011