From 40e0dab23f4c82a254578e486f5b578dd6b196c8 Mon Sep 17 00:00:00 2001
From: Anna Effort <anna.effort@ibm.com>
Date: Wed, 19 Aug 2026 00:10:17 -0700
Subject: [PATCH] Align Virtual Servers layout with the other components pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Grid becomes `grid-cols-1 / lg:2 / 2xl:3`. `col-span-full` and
  `sortServersForLayout` both go — cards are uniform now, so empty
  servers no longer need sorting to the end to keep a full-width row from
  splitting the grid. Servers render in API order.
- Page shell moves from `space-y-9` to a `mb-6` heading, and the loading
  branch stops early-returning, so the title survives the spinner.
- Cards drop `min-h-29` / `min-h-35` and their `justify-*` pairs.
- New `--server-icon-bg` token joins `--tool-icon-bg` and
  `--prompt-icon-bg`; the card status dot stops hardcoding emerald/red
  and picks up `--tool-status-*`.
- `ConnectSourceCard` adopts `AddToolsCard`'s add-icon token, hover and
  description leading.

2896 tests pass; tsc, eslint, prettier and build are clean. The e2e suite
was not run — no local Chromium.

Signed-off-by: Anna Effort <anna.effort@ibm.com>
---
 e2e/virtual-servers.spec.ts                   | 31 +++++----
 src/components/gateways/ConnectSourceCard.tsx |  8 +--
 src/components/gateways/GatewayCards.test.tsx |  8 +--
 .../gateways/VirtualServerCard.test.tsx       | 13 ++--
 src/components/gateways/VirtualServerCard.tsx | 28 ++------
 src/index.css                                 |  5 ++
 src/pages/Gateways.test.tsx                   | 18 ++---
 src/pages/Gateways.tsx                        | 69 ++++++++-----------
 8 files changed, 82 insertions(+), 98 deletions(-)

diff --git a/e2e/virtual-servers.spec.ts b/e2e/virtual-servers.spec.ts
index 9fb903a5..e794b03d 100644
--- a/e2e/virtual-servers.spec.ts
+++ b/e2e/virtual-servers.spec.ts
@@ -367,7 +367,7 @@ test.describe("Virtual Servers page", () => {
     await expect(page.getByText("testVS")).toBeVisible();
 
     const card = page.getByTestId("virtual-server-card").filter({ hasText: "testVS" });
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-emerald-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-active/);
     await expect(card.getByLabel("Enabled")).toBeVisible();
 
     await expect(card.getByTestId("tool-count")).toHaveText("2");
@@ -435,7 +435,7 @@ test.describe("Virtual Servers page", () => {
     await page.waitForLoadState("networkidle");
 
     const card = page.getByTestId("virtual-server-card").filter({ hasText: "testVS" });
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-red-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-inactive/);
     await expect(card.getByLabel("Disabled")).toBeVisible();
 
     await page.getByRole("button", { name: "Actions for testVS" }).click();
@@ -443,7 +443,7 @@ test.describe("Virtual Servers page", () => {
 
     await expect.poll(() => stateRequestCount).toBe(1);
     await expect(page.getByRole("dialog")).toHaveCount(0);
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-emerald-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-active/);
     await expect(card.getByLabel("Enabled")).toBeVisible();
     await expect(
       page.locator("[data-sonner-toast]").filter({ hasText: "testVS activated." }),
@@ -485,7 +485,7 @@ test.describe("Virtual Servers page", () => {
     await dialog.getByRole("button", { name: "Cancel" }).click();
     await expect(dialog).toHaveCount(0);
     expect(stateRequestCount).toBe(0);
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-emerald-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-active/);
 
     await page.getByRole("button", { name: "Actions for testVS" }).click();
     await page.getByRole("menuitem", { name: "Deactivate" }).click();
@@ -496,7 +496,7 @@ test.describe("Virtual Servers page", () => {
 
     await expect.poll(() => stateRequestCount).toBe(1);
     await expect(dialog).toHaveCount(0);
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-red-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-inactive/);
     await expect(card.getByLabel("Disabled")).toBeVisible();
     await expect(
       page.locator("[data-sonner-toast]").filter({ hasText: "testVS deactivated." }),
@@ -1116,7 +1116,7 @@ test.describe("Virtual Servers page", () => {
     );
   });
 
-  test("disables the Upload action button on virtual server cards", async ({ page }) => {
+  test("shows only the actions menu in the virtual server card header", async ({ page }) => {
     await page.route("**/servers?*", async (route) => {
       await route.fulfill({
         status: 200,
@@ -1128,7 +1128,8 @@ test.describe("Virtual Servers page", () => {
     await page.goto(APP.GATEWAYS);
     await page.waitForLoadState("networkidle");
 
-    await expect(page.getByRole("button", { name: /Open testVS \(coming soon\)/ })).toBeDisabled();
+    await expect(page.getByRole("button", { name: /Open testVS \(coming soon\)/ })).toHaveCount(0);
+    await expect(page.getByRole("button", { name: "Actions for testVS" })).toBeVisible();
   });
 
   test("navigates to create server UI from the create server card", async ({ page }) => {
@@ -1183,7 +1184,7 @@ test.describe("Virtual Servers page", () => {
 
     const card = page.getByTestId("virtual-server-card").filter({ hasText: "testVS" });
 
-    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-red-500/);
+    await expect(card.getByTestId("status-indicator")).toHaveClass(/bg-tool-status-inactive/);
     await expect(card.getByRole("img", { name: "Disabled" })).toBeVisible();
 
     await expect(card.getByText("disabled")).toBeVisible();
@@ -1220,7 +1221,7 @@ test.describe("Virtual Servers page", () => {
     await expect(card2.getByText("private")).toBeVisible();
   });
 
-  test("places empty virtual servers after servers with components", async ({ page }) => {
+  test("renders virtual servers in the order the API returned them", async ({ page }) => {
     const emptyServer = {
       ...MOCK_VIRTUAL_SERVER,
       id: "empty-server-id",
@@ -1244,13 +1245,15 @@ test.describe("Virtual Servers page", () => {
     await page.goto(APP.GATEWAYS);
     await page.waitForLoadState("networkidle");
 
+    // Cards are uniform now, so empty servers are no longer sorted to the end
+    // to keep a full-width row from splitting the grid.
     const cards = page.getByTestId("virtual-server-card");
     await expect(cards).toHaveCount(2);
-    await expect(cards.nth(0)).toHaveAttribute("data-server-name", "testVS");
-    await expect(cards.nth(1)).toHaveAttribute("data-server-name", "peach-thistle-shark");
-    await expect(cards.nth(1)).toHaveClass(/col-span-full/);
+    await expect(cards.nth(0)).toHaveAttribute("data-server-name", "peach-thistle-shark");
+    await expect(cards.nth(1)).toHaveAttribute("data-server-name", "testVS");
+    await expect(cards.nth(0)).not.toHaveClass(/col-span-full/);
     await expect(
-      cards.nth(1).getByRole("button", { name: "Add sources and components" }),
+      cards.nth(0).getByRole("button", { name: "Add sources and components" }),
     ).toBeVisible();
   });
 
@@ -1322,7 +1325,7 @@ test.describe("Virtual Servers page", () => {
 
     const card = page.getByTestId("virtual-server-card").filter({ hasText: "testVS" });
 
-    await expect(card).toHaveClass(/col-span-full/);
+    await expect(card).not.toHaveClass(/col-span-full/);
     await expect(card.getByRole("button", { name: "Add sources and components" })).toBeVisible();
     await expect(card.getByTestId("tool-count")).toHaveCount(0);
     await expect(card.getByTestId("resource-count")).toHaveCount(0);
diff --git a/src/components/gateways/ConnectSourceCard.tsx b/src/components/gateways/ConnectSourceCard.tsx
index 73f3ee97..a95fdfb0 100644
--- a/src/components/gateways/ConnectSourceCard.tsx
+++ b/src/components/gateways/ConnectSourceCard.tsx
@@ -10,7 +10,7 @@ export function ConnectSourceCard({ onAction }: { onAction: () => void }) {
       size="sm"
       role="button"
       tabIndex={0}
-      className="min-h-35 cursor-pointer justify-center transition-colors hover:bg-muted/40"
+      className="cursor-pointer transition-opacity hover:opacity-90"
       onClick={onAction}
       onKeyDown={(event) => {
         if (event.key === "Enter" || event.key === " ") {
@@ -21,14 +21,14 @@ export function ConnectSourceCard({ onAction }: { onAction: () => void }) {
     >
       <CardHeader className="gap-3">
         <div className="flex items-center gap-3">
-          <span className="flex size-6 items-center justify-center rounded-sm bg-primary text-primary-foreground">
-            <Plus className="size-4" />
+          <span className="flex size-6 shrink-0 items-center justify-center rounded bg-tool-add-icon-bg text-tool-add-icon-fg shadow-sm">
+            <Plus className="size-3.5" />
           </span>
           <CardTitle>{intl.formatMessage({ id: "gateways.createServer.card.title" })}</CardTitle>
         </div>
       </CardHeader>
       <CardContent>
-        <CardDescription className="text-[13px] leading-4">
+        <CardDescription className="leading-relaxed">
           {intl.formatMessage({ id: "gateways.createServer.card.description" })}
         </CardDescription>
       </CardContent>
diff --git a/src/components/gateways/GatewayCards.test.tsx b/src/components/gateways/GatewayCards.test.tsx
index 0d6b25fc..a09de877 100644
--- a/src/components/gateways/GatewayCards.test.tsx
+++ b/src/components/gateways/GatewayCards.test.tsx
@@ -92,14 +92,14 @@ describe("VirtualServerCard", () => {
     expect(screen.getByText("My Test Server")).toBeTruthy();
   });
 
-  it("shows green status indicator for enabled server", () => {
+  it("shows an active status indicator for enabled server", () => {
     renderWithProviders(<VirtualServerCard server={mockServer} onViewDetails={vi.fn()} />);
-    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-emerald-500");
+    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-tool-status-active");
   });
 
-  it("shows red status indicator for disabled server", () => {
+  it("shows an inactive status indicator for disabled server", () => {
     renderWithProviders(<VirtualServerCard server={emptyServer} onViewDetails={vi.fn()} />);
-    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-red-500");
+    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-tool-status-inactive");
   });
 
   it("calls onViewDetails when card is clicked", () => {
diff --git a/src/components/gateways/VirtualServerCard.test.tsx b/src/components/gateways/VirtualServerCard.test.tsx
index 000368dc..64192094 100644
--- a/src/components/gateways/VirtualServerCard.test.tsx
+++ b/src/components/gateways/VirtualServerCard.test.tsx
@@ -77,19 +77,19 @@ describe("VirtualServerCard", () => {
     expect(onViewDetails).toHaveBeenCalledWith(expect.objectContaining({ id: "vs-1" }));
   });
 
-  it("shows a green enabled indicator for enabled server", () => {
+  it("shows an active enabled indicator for enabled server", () => {
     renderWithProviders(
       <VirtualServerCard server={makeServer({ enabled: true })} onViewDetails={vi.fn()} />,
     );
-    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-emerald-500");
+    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-tool-status-active");
     expect(screen.getByRole("img", { name: "Enabled" })).toBeTruthy();
   });
 
-  it("shows a red disabled indicator for disabled server", () => {
+  it("shows an inactive disabled indicator for disabled server", () => {
     renderWithProviders(
       <VirtualServerCard server={makeServer({ enabled: false })} onViewDetails={vi.fn()} />,
     );
-    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-red-500");
+    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-tool-status-inactive");
     expect(screen.getByRole("img", { name: "Disabled" })).toBeTruthy();
   });
 
@@ -231,13 +231,14 @@ describe("VirtualServerCard", () => {
     expect(document.querySelector(".custom-class")).toBeTruthy();
   });
 
-  it("shows upload button for non-empty server", () => {
+  it("shows only the actions menu in the card header", () => {
     renderWithProviders(
       <VirtualServerCard
         server={makeServer({ associatedTools: ["t1"] })}
         onViewDetails={vi.fn()}
       />,
     );
-    expect(screen.getByRole("button", { name: /Open.*coming soon/i })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /Open.*coming soon/i })).toBeNull();
+    expect(screen.getByRole("button", { name: /Actions for/i })).toBeTruthy();
   });
 });
diff --git a/src/components/gateways/VirtualServerCard.tsx b/src/components/gateways/VirtualServerCard.tsx
index d101a487..e3bb9374 100644
--- a/src/components/gateways/VirtualServerCard.tsx
+++ b/src/components/gateways/VirtualServerCard.tsx
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import type { VirtualServer } from "@/types/server";
-import { Box, EllipsisVertical, MessageSquareCode, Plus, Upload, Wrench } from "lucide-react";
+import { Box, EllipsisVertical, MessageSquareCode, Plus, Wrench } from "lucide-react";
 import { useIntl } from "react-intl";
 
 export function VirtualServerCard({
@@ -52,26 +52,22 @@ export function VirtualServerCard({
   return (
     <Card
       size="sm"
-      className={cn(
-        isEmptyComposition ? "min-h-29 justify-center" : "min-h-35 justify-between",
-        "cursor-pointer transition-colors hover:bg-accent/50",
-        className,
-      )}
+      className={cn("cursor-pointer transition-colors hover:bg-accent/50", className)}
       data-testid="virtual-server-card"
       data-server-name={server.name}
       onClick={() => onViewDetails(server)}
     >
       <CardHeader className="gap-3">
         <div className="flex items-center gap-3">
-          <span className="flex size-6 shrink-0 items-center justify-center rounded-sm bg-primary text-primary-foreground">
-            <MCPIcon className="size-4 [&_path]:fill-current" />
+          <span className="flex size-6 shrink-0 items-center justify-center rounded bg-server-icon-bg text-black">
+            <MCPIcon className="size-3.5 [&_path]:fill-current" />
           </span>
           <div className="flex min-w-0 flex-1 items-center gap-2">
-            <CardTitle className="truncate">{server.name}</CardTitle>
+            <CardTitle className="truncate font-semibold">{server.name}</CardTitle>
             <span
               className={cn(
-                "size-1.5 rounded-full",
-                server.enabled ? "bg-emerald-500" : "bg-red-500",
+                "size-1.5 shrink-0 rounded-full",
+                server.enabled ? "bg-tool-status-active" : "bg-tool-status-inactive",
               )}
               data-testid="status-indicator"
               role="img"
@@ -81,16 +77,6 @@ export function VirtualServerCard({
             />
           </div>
           <div className="flex shrink-0 items-center gap-1">
-            {!isEmptyComposition && (
-              <Button
-                variant="ghost"
-                size="icon-xs"
-                aria-label={`Open ${server.name} (coming soon)`}
-                disabled
-              >
-                <Upload className="size-4" />
-              </Button>
-            )}
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
diff --git a/src/index.css b/src/index.css
index 44f67d89..d9e6d6ab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -63,6 +63,7 @@
   /* Tool-specific semantic tokens */
   --color-tool-icon-bg: var(--tool-icon-bg);
   --color-prompt-icon-bg: var(--prompt-icon-bg);
+  --color-server-icon-bg: var(--server-icon-bg);
   --color-tool-status-active: var(--tool-status-active);
   --color-tool-status-inactive: var(--tool-status-inactive);
   --color-tool-badge-bg: var(--tool-badge-bg);
@@ -129,6 +130,10 @@
   --destructive: oklch(0.577 0.245 27.325);
   --tool-icon-bg: var(--color-fuchsia-400);
   --prompt-icon-bg: #6fff9f;
+  /* Brand cyan. Like the two above it this is a chip *background* carrying a
+     black glyph, so it needs no `.dark` override — only `--status-icon`, which
+     paints a foreground, has to step down on white. */
+  --server-icon-bg: #70f9ff;
   /* emerald-400 falls under 3:1 on white; .dark restores it */
   --tool-status-active: var(--color-emerald-600);
   --tool-status-inactive: var(--color-neutral-500);
diff --git a/src/pages/Gateways.test.tsx b/src/pages/Gateways.test.tsx
index 2d78e531..7fd60de1 100644
--- a/src/pages/Gateways.test.tsx
+++ b/src/pages/Gateways.test.tsx
@@ -481,7 +481,7 @@ describe("Gateways", () => {
       expect(toast.error).toHaveBeenCalledWith("Failed to activate virtual server.");
     });
     expect(setData).not.toHaveBeenCalled();
-    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-red-500");
+    expect(screen.getByTestId("status-indicator")).toHaveClass("bg-tool-status-inactive");
   });
 
   it("shows API error detail when activation fails", async () => {
@@ -502,7 +502,7 @@ describe("Gateways", () => {
     });
   });
 
-  it("renders empty virtual servers as full-width add-components rows", () => {
+  it("renders empty virtual servers as ordinary grid cards with an add-components row", () => {
     const mockServer = makeServer({
       id: "gateway-empty",
       name: "peach-thistle-shark",
@@ -522,14 +522,14 @@ describe("Gateways", () => {
 
     renderWithProviders(<Gateways />);
 
-    expect(screen.getByTestId("virtual-server-card")).toHaveClass("col-span-full");
+    expect(screen.getByTestId("virtual-server-card")).not.toHaveClass("col-span-full");
     expect(screen.getByText("peach-thistle-shark")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Add sources and components" })).toBeInTheDocument();
     expect(screen.queryByTestId("tool-count")).not.toBeInTheDocument();
     expect(screen.queryByTestId("last-updated")).not.toBeInTheDocument();
   });
 
-  it("renders empty virtual servers after servers with components", () => {
+  it("renders virtual servers in the order the API returned them", () => {
     const emptyServer = makeServer({
       id: "gateway-empty",
       name: "peach-thistle-shark",
@@ -556,11 +556,13 @@ describe("Gateways", () => {
 
     renderWithProviders(<Gateways />);
 
+    // Cards are uniform now, so empty servers are no longer sorted to the end
+    // to keep a full-width row from splitting the grid.
     const renderedCards = screen.getAllByTestId("virtual-server-card");
     expect(renderedCards).toHaveLength(2);
-    expect(renderedCards[0]).toHaveAttribute("data-server-name", "GH repo tasks");
-    expect(renderedCards[1]).toHaveAttribute("data-server-name", "peach-thistle-shark");
-    expect(renderedCards[1]).toHaveClass("col-span-full");
+    expect(renderedCards[0]).toHaveAttribute("data-server-name", "peach-thistle-shark");
+    expect(renderedCards[1]).toHaveAttribute("data-server-name", "GH repo tasks");
+    expect(renderedCards[0]).not.toHaveClass("col-span-full");
   });
 
   it("navigates to the create server UI when the create server card is clicked", async () => {
@@ -1161,7 +1163,7 @@ describe("Gateways", () => {
     expect(screen.getByText("Sparse server")).toBeInTheDocument();
     const card = screen.getByTestId("virtual-server-card");
     expect(card).toBeInTheDocument();
-    expect(card).toHaveClass("col-span-full");
+    expect(card).not.toHaveClass("col-span-full");
     expect(screen.getByRole("button", { name: "Add sources and components" })).toBeInTheDocument();
     expect(card.querySelector('[data-testid="tool-count"]')).not.toBeInTheDocument();
     expect(card.querySelector('[data-testid="resource-count"]')).not.toBeInTheDocument();
diff --git a/src/pages/Gateways.tsx b/src/pages/Gateways.tsx
index 127a442b..930f821f 100644
--- a/src/pages/Gateways.tsx
+++ b/src/pages/Gateways.tsx
@@ -5,7 +5,6 @@ import { toast } from "sonner";
 import { ConnectSourceCard } from "@/components/gateways/ConnectSourceCard";
 import { VirtualServerCard } from "@/components/gateways/VirtualServerCard";
 import { VirtualServerDetailsPanel } from "@/components/gateways/VirtualServerDetailsPanel";
-import { hasVirtualServerComponents } from "@/components/gateways/utils";
 import { ConfirmDialog } from "@/components/servers/ConfirmDialog";
 import { Loading } from "@/components/ui/loading";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -19,7 +18,6 @@ import { useAuth } from "@/auth/useAuth";
 import { useQuery } from "@/hooks/useQuery";
 import { useRouter } from "@/router";
 import type { VirtualServer, VirtualServersResponse } from "@/types/server";
-import { cn } from "@/lib/utils";
 import { extractApiErrorDetail, sanitizeError } from "@/utils/errors";
 
 const DEFAULT_PAGE_SIZE = 12;
@@ -27,12 +25,6 @@ const SERVERS_QUERY_PATH = `/servers?limit=${DEFAULT_PAGE_SIZE}&include_inactive
 const CREATE_SERVER_PATH = "/app/gateways/create-server";
 const EDIT_SERVER_ID_QUERY_PARAM = "editServerId";
 
-function sortServersForLayout(servers: VirtualServer[]): VirtualServer[] {
-  return [...servers].sort(
-    (a, b) => Number(hasVirtualServerComponents(b)) - Number(hasVirtualServerComponents(a)),
-  );
-}
-
 export function Gateways() {
   const intl = useIntl();
   const { navigate, path } = useRouter();
@@ -57,7 +49,6 @@ export function Gateways() {
     () => (data?.servers ?? []).filter((server) => !deletedServerIds.has(server.id)),
     [data?.servers, deletedServerIds],
   );
-  const layoutServers = useMemo(() => sortServersForLayout(servers), [servers]);
   const selectedSearchServerId = useMemo(() => {
     const queryString = path.split("?")[1] ?? "";
     return new URLSearchParams(queryString).get("selected")?.trim() || null;
@@ -227,25 +218,7 @@ export function Gateways() {
     setIsDetailsPanelOpen(true);
   }, [selectedSearchServerId, servers]);
 
-  if (isLoading) {
-    return (
-      <div className="p-6">
-        <div
-          role="status"
-          aria-live="polite"
-          aria-busy="true"
-          className="flex items-center justify-center p-12"
-        >
-          <Loading />
-          <span className="sr-only">
-            {intl.formatMessage({ id: "gateways.loadingVirtualServers" })}
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  if (error && servers.length === 0) {
+  if (error && !isLoading && servers.length === 0) {
     return (
       <div className="p-6">
         <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-4" role="alert">
@@ -259,8 +232,8 @@ export function Gateways() {
   }
 
   return (
-    <div className="space-y-9 p-6">
-      <div className="flex items-center gap-2">
+    <div className="p-6">
+      <div className="mb-6 flex items-center gap-2">
         <h1 ref={headingRef} tabIndex={-1} className="text-base font-semibold text-foreground">
           {intl.formatMessage({ id: "gateways.title" })}
         </h1>
@@ -279,8 +252,25 @@ export function Gateways() {
         </TooltipProvider>
       </div>
 
+      {isLoading && (
+        <div
+          role="status"
+          aria-live="polite"
+          aria-busy="true"
+          className="flex items-center justify-center p-12"
+        >
+          <Loading />
+          <span className="sr-only">
+            {intl.formatMessage({ id: "gateways.loadingVirtualServers" })}
+          </span>
+        </div>
+      )}
+
       {error && (
-        <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-4" role="alert">
+        <div
+          className="mb-6 rounded-lg border border-destructive/30 bg-destructive/10 p-4"
+          role="alert"
+        >
           <h2 className="font-semibold text-destructive">
             {intl.formatMessage({ id: "gateways.errorLoadingVirtualServers" })}
           </h2>
@@ -288,12 +278,10 @@ export function Gateways() {
         </div>
       )}
 
-      <div className="grid gap-6 lg:grid-cols-2">
-        {canCreateServer && <ConnectSourceCard onAction={() => navigate(CREATE_SERVER_PATH)} />}
-        {layoutServers.map((server) => {
-          const hasComponents = hasVirtualServerComponents(server);
-
-          return (
+      {!isLoading && (
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 2xl:grid-cols-3">
+          {canCreateServer && <ConnectSourceCard onAction={() => navigate(CREATE_SERVER_PATH)} />}
+          {servers.map((server) => (
             <VirtualServerCard
               key={server.id}
               server={server}
@@ -310,11 +298,10 @@ export function Gateways() {
               deleteDisabled={
                 isTogglePending || (isDeletePending && pendingDeleteServerId !== server.id)
               }
-              className={cn(!hasComponents && "col-span-full")}
             />
-          );
-        })}
-      </div>
+          ))}
+        </div>
+      )}
 
       {detailsServerId && (
         <VirtualServerDetailsPanelContainer