Setup experience: status jitter fix (#44464)

2026-05-05 08:55:36 -04:00
parent 0448ac1f95
commit 92cba651b2
18 changed files with 106 additions and 26 deletions
@@ -1,7 +1,7 @@
 .icon-status-message {
  display: flex;
  align-items: flex-start;
-  gap: $pad-small;
+  gap: $gap-icon-text;
  font-size: $x-small;
 }

@@ -4,10 +4,7 @@
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
-
-    .icon {
-      margin-right: $pad-xsmall;
-    }
+    gap: $gap-icon-text;

    span {
      white-space: nowrap;
@@ -2,6 +2,6 @@
  display: inline-flex;
  flex-direction: row;
  text-wrap: nowrap;
-  gap: $pad-small;
+  gap: $gap-icon-text;
  align-items: center;
 }
@@ -4,7 +4,7 @@
  gap: $pad-small;

  .graphic {
-      width: $pad-xlarge;
-      scale: 60%;
+    width: $pad-xlarge;
+    scale: 60%;
  }
 }
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import SetupScriptStatusCell from "./SetupScriptStatusCell";
+
+const meta: Meta<typeof SetupScriptStatusCell> = {
+  title: "Components/TableContainer/SetupScriptStatusCell",
+  component: SetupScriptStatusCell,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SetupScriptStatusCell>;
+
+export const Pending: Story = {
+  args: { status: "pending" },
+};
+
+export const Running: Story = {
+  args: { status: "running" },
+};
+
+export const Success: Story = {
+  args: { status: "success" },
+};
+
+export const Failure: Story = {
+  args: { status: "failure" },
+};
@@ -34,8 +34,14 @@ const SetupScriptStatusCell = ({ status }: ISetupScriptStatusCell) => {
  const { label, icon } = serverToUiStatus(status);
  return (
    <div className={baseClass}>
-      {icon === "spinner" ? <Spinner size="x-small" /> : <Icon name={icon} />}
-      {label}
+      <div className={`${baseClass}__icon`}>
+        {icon === "spinner" ? (
+          <Spinner size="x-small" includeContainer={false} delay={0} />
+        ) : (
+          <Icon name={icon} />
+        )}
+      </div>
+      <span className={`${baseClass}__label`}>{label}</span>
    </div>
  );
 };
@@ -1,11 +1,18 @@
 .setup-script-status-cell {
  display: flex;
  align-items: center;
-  gap: $pad-xsmall;
+  gap: $gap-icon-text;
+  font-size: $x-small; // Already applied but on component level for storybook

-  .loading-spinner {
-    margin: 0;
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
    width: $pad-medium;
    height: $pad-medium;
  }
+
+  &__label {
+    min-width: 14ch; // 14 characters — Prevents jitter, fits longest label ("Installing")
+  }
 }
@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import SetupSoftwareStatusCell from "./SetupSoftwareStatusCell";
+
+const meta: Meta<typeof SetupSoftwareStatusCell> = {
+  title: "Components/TableContainer/SetupSoftwareStatusCell",
+  component: SetupSoftwareStatusCell,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SetupSoftwareStatusCell>;
+
+export const Pending: Story = {
+  args: { status: "pending" },
+};
+
+export const Installing: Story = {
+  args: { status: "running" },
+};
+
+export const Installed: Story = {
+  args: { status: "success" },
+};
+
+export const Failure: Story = {
+  args: { status: "failure" },
+};
@@ -34,8 +34,14 @@ const SetupSoftwareStatusCell = ({ status }: ISetupSoftwareStatusCell) => {
  const { label, icon } = serverToUiStatus(status);
  return (
    <div className={baseClass}>
-      {icon === "spinner" ? <Spinner size="x-small" /> : <Icon name={icon} />}
-      {label}
+      <div className={`${baseClass}__icon`}>
+        {icon === "spinner" ? (
+          <Spinner size="x-small" includeContainer={false} delay={0} />
+        ) : (
+          <Icon name={icon} />
+        )}
+      </div>
+      <span className={`${baseClass}__label`}>{label}</span>
    </div>
  );
 };
@@ -1,11 +1,18 @@
 .setup-software-status-cell {
  display: flex;
  align-items: center;
-  gap: $pad-xsmall;
+  gap: $gap-icon-text;
+  font-size: $x-small; // Already applied but on component level for storybook

-  .loading-spinner {
-    margin: 0;
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
    width: $pad-medium;
    height: $pad-medium;
  }
+
+  &__label {
+    min-width: 14ch; // 14 characters — Prevents jitter, fits longest label ("Installing")
+  }
 }
@@ -1,7 +1,7 @@
 .tooltip-truncated-cell {
  display: flex;
  align-items: center; // For badges, etc
-  gap: $pad-small;
+  gap: $gap-icon-text;
  max-width: 100%;

  .text-muted {
@@ -55,7 +55,7 @@
  .data-table__suffix,
  .data-table__prefix {
    display: flex;
-    gap: $pad-small;
+    gap: $gap-icon-text;
    height: 24px;
    align-items: center;
    flex-shrink: 0; /* Prevent suffix from shrinking */
@@ -149,7 +149,7 @@ $shadow-transition-width: 16px;
          span {
            display: flex;
            align-items: center;
-            gap: 3px;
+            gap: $gap-icon-text;
          }
        }

@@ -7,5 +7,5 @@
  border-radius: 6px;
  font-size: $xxx-small;
  font-weight: $bold;
-  gap: $pad-small
+  gap: $gap-icon-text;
 }
@@ -5,7 +5,7 @@
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
-  gap: $pad-small;
+  gap: $gap-icon-text;

  &__tooltip-wrapper {
    display: flex;
@@ -2,6 +2,6 @@
  .component__tooltip-wrapper__element {
    display: inline-flex;
    align-items: center;
-    gap: $pad-small;
+    gap: $gap-icon-text;
  }
 }
@@ -10,7 +10,7 @@
    .component__tooltip-wrapper__element {
      display: flex;
      align-items: center;
-      gap: $pad-small;
+      gap: $gap-icon-text;
    }

    .component__tooltip-wrapper__tip-text {
@@ -1,7 +1,7 @@
 .tile-action-status {
  display: flex;
  align-items: center;
-  gap: $pad-small;
+  gap: $gap-icon-text;
  font-size: $x-small;
  height: 36px; // Min height of button to keep height the same when switching to active action "Installing..."
 }
@@ -21,4 +21,5 @@ $gap-form-component: $pad-small;
 $gap-data-sets: $pad-medium;
 $gap-table-elements: $pad-medium;
 $gap-modal-component: $pad-large;
+$gap-icon-text: $pad-small;
 $table-cell-padding: $pad-large;