refactor: Improve agent loading state (#4814)

site/src/components/AppLink/AppLink.tsx

@@ -61,7 +61,7 @@ export const AppLink: FC<AppLinkProps> = ({
   let primaryTooltip = ""
   if (app.health === "initializing") {
     canClick = false
-    icon = <CircularProgress size={16} />
+    icon = <CircularProgress size={12} />
     primaryTooltip = "Initializing..."
   }
   if (app.health === "unhealthy") {

site/src/components/AppLink/AppLinkSkeleton.tsx

@@ -0,0 +1,22 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { Skeleton } from "@material-ui/lab"
+import React from "react"
+import { borderRadiusSm } from "theme/constants"
+
+export const AppLinkSkeleton: React.FC<{ width: number }> = ({ width }) => {
+  const styles = useStyles()
+  return (
+    <Skeleton
+      width={width}
+      height={36}
+      variant="rect"
+      className={styles.skeleton}
+    />
+  )
+}
+
+export const useStyles = makeStyles(() => ({
+  skeleton: {
+    borderRadius: borderRadiusSm,
+  },
+}))

site/src/components/Resources/AgentRow.stories.tsx

@@ -2,6 +2,7 @@ import { Story } from "@storybook/react"
 import {
   MockWorkspace,
   MockWorkspaceAgent,
+  MockWorkspaceAgentConnecting,
   MockWorkspaceApp,
 } from "testHelpers/entities"
 import { AgentRow, AgentRowProps } from "./AgentRow"
@@ -58,3 +59,11 @@ BunchOfApps.args = {
   applicationsHost: "",
   showApps: true,
 }
+
+export const Connecting = Template.bind({})
+Connecting.args = {
+  agent: MockWorkspaceAgentConnecting,
+  workspace: MockWorkspace,
+  applicationsHost: "",
+  showApps: true,
+}

site/src/components/Resources/AgentRow.tsx

@@ -11,6 +11,7 @@ import { AgentLatency } from "./AgentLatency"
 import { AgentVersion } from "./AgentVersion"
 import { Maybe } from "components/Conditionals/Maybe"
 import { AgentStatus } from "./AgentStatus"
+import { AppLinkSkeleton } from "components/AppLink/AppLinkSkeleton"
 
 export interface AgentRowProps {
   agent: WorkspaceAgent
@@ -59,6 +60,11 @@ export const AgentRow: FC<AgentRowProps> = ({
             </Maybe>
 
             <AgentLatency agent={agent} />
+
+            <Maybe condition={agent.status === "connecting"}>
+              <Skeleton width={160} variant="text" />
+              <Skeleton width={36} variant="text" />
+            </Maybe>
           </Stack>
         </div>
       </Stack>
@@ -106,8 +112,8 @@ export const AgentRow: FC<AgentRowProps> = ({
         )}
         {showApps && agent.status === "connecting" && (
           <>
-            <Skeleton width={80} height={36} variant="rect" />
-            <Skeleton width={120} height={36} variant="rect" />
+            <AppLinkSkeleton width={84} />
+            <AppLinkSkeleton width={112} />
           </>
         )}
       </Stack>

site/src/components/Resources/AgentStatus.tsx

@@ -84,18 +84,18 @@ const useStyles = makeStyles((theme) => ({
 
   "@keyframes pulse": {
     "0%": {
-      opacity: 0.25,
-    },
-    "50%": {
       opacity: 1,
     },
+    "50%": {
+      opacity: 0.4,
+    },
     "100%": {
-      opacity: 0.25,
+      opacity: 1,
     },
   },
 
   connecting: {
     backgroundColor: theme.palette.info.light,
-    animation: "$pulse 1s ease-in-out forwards infinite",
+    animation: "$pulse 1.5s 0.5s ease-in-out forwards infinite",
   },
 }))

site/src/theme/constants.ts

@@ -1,5 +1,6 @@
 export const spacing = 8
 export const borderRadius = 8
+export const borderRadiusSm = 6
 export const buttonBorderWidth = 2
 export const MONOSPACE_FONT_FAMILY =
   "'IBM Plex Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace"

site/src/theme/overrides.ts

@@ -1,7 +1,7 @@
 import { lighten, Theme } from "@material-ui/core/styles"
 import { Overrides } from "@material-ui/core/styles/overrides"
 import { colors } from "./colors"
-import { borderRadius } from "./constants"
+import { borderRadius, borderRadiusSm } from "./constants"
 
 export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
   return {
@@ -61,7 +61,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         padding: `0 16px`,
         fontSize: 14,
         minHeight: 36,
-        borderRadius: 6,
+        borderRadius: borderRadiusSm,
       },
       iconSizeSmall: {
         width: 14,
@@ -69,7 +69,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         marginLeft: "0 !important",
         marginRight: 8,
 
-        "& svg": {
+        "& svg:not(.MuiCircularProgress-svg)": {
           width: 14,
           height: 14,
         },
@@ -190,5 +190,12 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => {
         marginTop: 8,
       },
     },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- The Mui types don't accept the MuiSkeleton but it works. I tried to extends the Overrides interface with no success.
+    // @ts-ignore
+    MuiSkeleton: {
+      root: {
+        backgroundColor: palette.divider,
+      },
+    },
   }
 }