feat: add loaders to ssh and terminal buttons (#3820)

site/src/components/Resources/Resources.tsx

@@ -5,6 +5,7 @@ import TableCell from "@material-ui/core/TableCell"
 import TableContainer from "@material-ui/core/TableContainer"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
+import { Skeleton } from "@material-ui/lab"
 import useTheme from "@material-ui/styles/useTheme"
 import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
 import { TableCellDataPrimary } from "components/TableCellData/TableCellData"
@@ -152,6 +153,12 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
                               ))}
                             </>
                           )}
+                          {canUpdateWorkspace && agent.status === "connecting" && (
+                            <>
+                              <Skeleton width={80} height={60} />
+                              <Skeleton width={120} height={60} />
+                            </>
+                          )}
                         </div>
                       </TableCell>
                     </TableRow>

site/src/pages/WorkspacePage/WorkspacePage.test.tsx

@@ -19,6 +19,7 @@ import {
   MockTemplate,
   MockWorkspace,
   MockWorkspaceAgent,
+  MockWorkspaceAgentConnecting,
   MockWorkspaceAgentDisconnected,
   MockWorkspaceBuild,
   renderWithAuth,
@@ -205,10 +206,14 @@ describe("WorkspacePage", () => {
         DisplayAgentStatusLanguage[MockWorkspaceAgent.status],
       )
       expect(agent1Status.length).toEqual(4)
-      const agent2Status = await screen.findAllByText(
+      const agentDisconnected = await screen.findAllByText(
         DisplayAgentStatusLanguage[MockWorkspaceAgentDisconnected.status],
       )
-      expect(agent2Status.length).toEqual(2)
+      expect(agentDisconnected.length).toEqual(1)
+      const agentConnecting = await screen.findAllByText(
+        DisplayAgentStatusLanguage[MockWorkspaceAgentConnecting.status],
+      )
+      expect(agentConnecting.length).toEqual(1)
       expect(getTemplateMock).toBeCalled()
     })
   })

site/src/testHelpers/entities.ts

@@ -329,8 +329,16 @@ export const MockWorkspaceAgentOutdated: TypesGen.WorkspaceAgent = {
   operating_system: "Windows",
 }
 
+export const MockWorkspaceAgentConnecting: TypesGen.WorkspaceAgent = {
+  ...MockWorkspaceAgent,
+  id: "test-workspace-agent-2",
+  name: "another-workspace-agent",
+  status: "connecting",
+  version: "",
+}
+
 export const MockWorkspaceResource: TypesGen.WorkspaceResource = {
-  agents: [MockWorkspaceAgent, MockWorkspaceAgentDisconnected, MockWorkspaceAgentOutdated],
+  agents: [MockWorkspaceAgent, MockWorkspaceAgentConnecting, MockWorkspaceAgentOutdated],
   created_at: "",
   id: "test-workspace-resource",
   job_id: "",
@@ -343,10 +351,14 @@ export const MockWorkspaceResource: TypesGen.WorkspaceResource = {
   ],
 }
 
-export const MockWorkspaceResource2 = {
+export const MockWorkspaceResource2: TypesGen.WorkspaceResource = {
-  ...MockWorkspaceResource,
+  agents: [MockWorkspaceAgent, MockWorkspaceAgentDisconnected, MockWorkspaceAgentOutdated],
+  created_at: "",
   id: "test-workspace-resource-2",
+  job_id: "",
   name: "another-workspace-resource",
+  type: "google_compute_disk",
+  workspace_transition: "start",
   metadata: [
     { key: "type", value: "google_compute_disk", sensitive: false },
     { key: "size", value: "32GB", sensitive: false },