From 5951fb6c4791cc58bf2dfdaa9a36fc3bb6ddec41 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Tue, 29 Sep 2026 11:42:58 +1000
Subject: [PATCH] fix(studio): polish Pipelines loading and update cues
 (#50963)

## Problem

Pipelines loading causes layout shifts, and the update cue is hard to
connect to its menu action.

- Resolves
[PIPE-1078](https://linear.app/supabase/issue/PIPE-1078/show-destination-rows-while-details-are-loading)
- Resolves
[DEPR-688](https://linear.app/supabase/issue/DEPR-688/widen-the-update-available-modal)
- Resolves
[DEPR-691](https://linear.app/supabase/issue/DEPR-691/clarify-the-update-available-indicator-in-pipeline-actions)

## Solution

Reserve space for the graph and list while loading, show destination
rows before their details arrive, align the detail header, and stack
version values in the update dialog. Match the primary-colour dot on the
options button and its Update available menu item. Give the status
tooltip more room.

| Before | After |
| --- | --- |
| <img width="408" height="346" alt="8294"
src="https://github.com/user-attachments/assets/9a44dfe0-5473-4809-b705-fd6077efe44b"
/> | <img width="844" height="738" alt="CleanShot 2026-09-28 at 17 10
34@2x"
src="https://github.com/user-attachments/assets/4eba3f16-6dc4-4c02-83b4-9689203859bd"
/> |


| After |
| --- |
| <img width="426" height="472" alt="CleanShot 2026-09-28 at 17 11
27@2x"
src="https://github.com/user-attachments/assets/8b3c181c-b48e-4803-a24a-fb7dce3957d4"
/> |
| _Links ambiguous dot to dropdown menu item_  |
| <img width="1942" height="262" alt="CleanShot 2026-09-28 at 17 29
18@2x"
src="https://github.com/user-attachments/assets/efc047bb-a8ea-4041-bd0d-fa2cb15f4414"
/> |
| _Better alignment with nav bar above it_ |

## Review instructions

1. Reload Database > Pipelines and check the loading layout and
destination rows.
2. Open a pipeline detail page and check its header, update dialog, and
matching update dots.

## Checklist

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Destination rows now appear while pipeline details are loading, with
controls becoming available when the details finish loading.

* **Style**
* Loading states on the replication page now use diagram and
table-shaped placeholders.
* Updated replication page spacing, version-status tooltips, update
indicators, and the version comparison layout.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Replication/DestinationRow.test.tsx       |  43 +++++++-
 .../Database/Replication/DestinationRow.tsx   | 102 +++++++++---------
 .../Database/Replication/Destinations.tsx     |   6 +-
 .../Replication/PipelineStatePill.tsx         |   2 +-
 .../Replication/ReplicationPipelineLayout.tsx |   2 +-
 .../Database/Replication/RowMenu.tsx          |   8 +-
 .../Replication/UpdateVersionModal.tsx        |  32 +++---
 .../[ref]/database/pipelines/index.tsx        |  55 +++++++---
 8 files changed, 159 insertions(+), 91 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.test.tsx
index 24d0c73b802..78fab0b282e 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.test.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.test.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event'
 import { platformComponents as components } from 'api-types'
 import { mockAnimationsApi } from 'jsdom-testing-mocks'
 import { HttpResponse } from 'msw'
+import { Table, TableBody } from 'ui'
 import { describe, expect, test, vi } from 'vitest'
 
 import { DestinationRow as DestinationRowComponent } from './DestinationRow'
@@ -68,12 +69,13 @@ const addDestinationMock = () =>
       }),
   })
 
-const addPipelinesMock = () =>
+const addPipelinesMock = (waitForResponse?: Promise<void>) =>
   addAPIMock({
     method: 'get',
     path: '/platform/replication/:ref/pipelines',
-    response: () =>
-      HttpResponse.json<ReplicationPipelinesResponse>({
+    response: async () => {
+      await waitForResponse
+      return HttpResponse.json<ReplicationPipelinesResponse>({
         pipelines: [
           {
             id: PIPELINE_ID,
@@ -89,7 +91,8 @@ const addPipelinesMock = () =>
             },
           },
         ],
-      }),
+      })
+    },
   })
 
 const addPipelineStatusMock = (statusName: ReplicationPipelineStatusResponse['status']['name']) =>
@@ -145,6 +148,38 @@ describe('DestinationRow', () => {
     addVersionMock()
   }
 
+  test('shows the destination before its pipeline details load', async () => {
+    let finishPipelineRequest = () => {}
+    const pendingPipeline = new Promise<void>((resolve) => {
+      finishPipelineRequest = resolve
+    })
+    addSourcesMock()
+    addDestinationMock()
+    addPipelinesMock(pendingPipeline)
+    addPipelineStatusMock('started')
+    addReplicationStatusMock(0)
+    addVersionMock()
+
+    customRender(
+      <Table>
+        <TableBody>
+          <DestinationRow destinationId={DESTINATION_ID} />
+        </TableBody>
+      </Table>
+    )
+
+    const row = (await screen.findByText('My BigQuery Destination')).closest('tr')
+    expect(row).toBeInTheDocument()
+    expect(row).not.toHaveAttribute('tabindex')
+    expect(screen.queryByRole('button', { name: 'Pipeline options' })).not.toBeInTheDocument()
+
+    await act(async () => finishPipelineRequest())
+
+    expect(await screen.findByText('supabase_realtime')).toBeInTheDocument()
+    expect(row).toHaveAttribute('tabindex', '0')
+    expect(screen.getByRole('button', { name: 'Pipeline options' })).toBeInTheDocument()
+  })
+
   test('waits for asynchronous shutdown before deleting the pipeline', async () => {
     addAllMocks()
     routerMock.setCurrentUrl('/project/default/database/pipelines')
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
index 7766862c6da..d9c70607358 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
@@ -3,7 +3,7 @@ import { ChevronRight, Minus } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { toast } from 'sonner'
-import { TableCell, TableRow } from 'ui'
+import { cn, TableCell, TableRow } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { DeleteDestination } from './DeleteDestination'
@@ -50,9 +50,8 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
     error: pipelineError,
     isPending: isPipelineLoading,
     isError: isPipelineError,
-    isSuccess: isPipelineSuccess,
   } = pipelineFetcher
-  const destinationName = destination?.name ?? ''
+  const destinationName = destination?.name ?? pipeline?.destination_name ?? ''
 
   const {
     error: pipelineStatusError,
@@ -134,8 +133,7 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
     }
   }
 
-  // Five distinct states, so early returns rather than a ternary chain. The row only renders once
-  // a pipeline exists, so there is no "no pipeline" case to handle here.
+  // Five distinct states, so early returns rather than a ternary chain.
   const renderLag = () => {
     if (isReplicationStatusLoading) return <ShimmeringLoader />
     if (isInitialSyncRunning)
@@ -161,39 +159,41 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
           </TableCell>
         </TableRow>
       )}
-      {isPipelineSuccess && pipeline && (
+      {(isPipelineLoading || pipeline) && (
         <TableRow
-          className="relative cursor-pointer focus-inset"
+          className={cn('relative', pipeline && 'cursor-pointer focus-inset')}
           onClick={handleNavigation}
           onAuxClick={handleNavigation}
           onKeyDown={handleNavigation}
-          tabIndex={0}
+          tabIndex={pipeline ? 0 : undefined}
         >
           <TableCell className="!pr-1">
             {type ? <DestinationLogo type={type} hasErrors={hasTableErrors} /> : null}
           </TableCell>
 
           <TableCell className="max-w-[180px]">
-            {isPipelineLoading ? (
+            {isPipelineLoading && !destinationName ? (
               <ShimmeringLoader />
             ) : (
               <div className="flex flex-col gap-y-0.5">
                 <p className="text-sm font-medium text-foreground truncate">
                   {destinationName || type}
                 </p>
-                <DetailSubtext className="flex items-center gap-x-1.5">
-                  <span>#{pipeline?.id}</span>
-                  <span aria-hidden>&middot;</span>
-                  <span>{type}</span>
-                  {hasTableErrors && (
-                    <>
-                      <span aria-hidden>&middot;</span>
-                      <span className="text-destructive">
-                        {errorCount} table error{errorCount === 1 ? '' : 's'}
-                      </span>
-                    </>
-                  )}
-                </DetailSubtext>
+                {pipeline && (
+                  <DetailSubtext className="flex items-center gap-x-1.5">
+                    <span>#{pipeline.id}</span>
+                    <span aria-hidden>&middot;</span>
+                    <span>{type}</span>
+                    {hasTableErrors && (
+                      <>
+                        <span aria-hidden>&middot;</span>
+                        <span className="text-destructive">
+                          {errorCount} table error{errorCount === 1 ? '' : 's'}
+                        </span>
+                      </>
+                    )}
+                  </DetailSubtext>
+                )}
               </div>
             )}
           </TableCell>
@@ -232,32 +232,38 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
 
           <TableCell>
             <div className="flex items-center justify-end gap-x-2">
-              <div
-                onClick={(event) => event.stopPropagation()}
-                onAuxClick={(event) => event.stopPropagation()}
-                onKeyDown={(event) => event.stopPropagation()}
-              >
-                <RowMenu
-                  destinationId={destinationId}
-                  pipeline={pipeline}
-                  pipelineStatus={pipelineStatus?.status}
-                  error={pipelineStatusError}
-                  isLoading={isPipelineStatusLoading}
-                  isError={isPipelineStatusError}
-                  onDeleteClick={() => setShowDeleteDestinationForm(true)}
-                  hasUpdate={hasUpdate}
-                  onUpdateClick={() => setShowUpdateVersionModal(true)}
-                />
-              </div>
-              <ChevronRight
-                size={16}
-                strokeWidth={1.5}
-                className="text-foreground-lighter"
-                aria-hidden
-              />
-              <button tabIndex={-1} className="sr-only">
-                Go to pipeline details
-              </button>
+              {pipeline ? (
+                <>
+                  <div
+                    onClick={(event) => event.stopPropagation()}
+                    onAuxClick={(event) => event.stopPropagation()}
+                    onKeyDown={(event) => event.stopPropagation()}
+                  >
+                    <RowMenu
+                      destinationId={destinationId}
+                      pipeline={pipeline}
+                      pipelineStatus={pipelineStatus?.status}
+                      error={pipelineStatusError}
+                      isLoading={isPipelineStatusLoading}
+                      isError={isPipelineStatusError}
+                      onDeleteClick={() => setShowDeleteDestinationForm(true)}
+                      hasUpdate={hasUpdate}
+                      onUpdateClick={() => setShowUpdateVersionModal(true)}
+                    />
+                  </div>
+                  <ChevronRight
+                    size={16}
+                    strokeWidth={1.5}
+                    className="text-foreground-lighter"
+                    aria-hidden
+                  />
+                  <button tabIndex={-1} className="sr-only">
+                    Go to pipeline details
+                  </button>
+                </>
+              ) : (
+                <ShimmeringLoader className="h-6 w-6 py-0" />
+              )}
             </div>
           </TableCell>
         </TableRow>
diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
index a65f24d008b..2e21f98ddc3 100644
--- a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
@@ -22,7 +22,7 @@ import {
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
-import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { GenericTableLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { DestinationPanel } from './DestinationPanel/DestinationPanel'
 import { DestinationType } from './DestinationPanel/DestinationPanel.types'
@@ -363,7 +363,9 @@ export const Destinations = () => {
           <AlertError error={destinationsError} subject="Failed to retrieve pipelines" />
         )}
 
-        {isDestinationsLoading && <GenericSkeletonLoader />}
+        {isDestinationsLoading && (
+          <GenericTableLoader headers={[null, 'Name', 'Status', 'Lag', 'Publication', null]} />
+        )}
 
         {!isDestinationsLoading && hasDestinations && (
           <Card>
diff --git a/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx b/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx
index 86f5de20ae2..b5245b3ea66 100644
--- a/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx
@@ -81,7 +81,7 @@ export const PipelineStatePill = ({
             {shouldShowError ? 'Unknown' : label}
           </StateDot>
         </TooltipTrigger>
-        <TooltipContent side="bottom" className="max-w-xs">
+        <TooltipContent side="bottom" className="max-w-64">
           {tooltipMessage}
           {isError && isRequestPending && ` Unable to refresh status: ${error?.message}.`}
         </TooltipContent>
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx
index efc35800f6c..eea85b96784 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx
@@ -244,7 +244,7 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
           </BreadcrumbList>
         </PageBreadcrumbs>
 
-        <PageHeader size="large" className="border-b py-4">
+        <PageHeader size="full" className="border-b py-4 [&>div]:px-4 [&>div]:xl:px-4">
           <PageHeaderMeta>
             <PageHeaderIcon>
               {isPipelineIdentityLoading ? (
diff --git a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
index 1246f26ad9f..2629cb1e7fc 100644
--- a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
@@ -166,7 +166,7 @@ export const RowMenu = ({
             />
             {hasUpdate && (
               <span
-                className="absolute -top-0.5 -right-0.5 h-2 w-2 bg-primary-bright rounded-full"
+                className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-primary-bright"
                 aria-hidden
               />
             )}
@@ -184,12 +184,16 @@ export const RowMenu = ({
           {hasUpdate && (
             <>
               <DropdownMenuItem
-                className="space-x-2"
+                className="gap-x-2"
                 onClick={() => onUpdateClick?.()}
                 disabled={isPipelineRequestPending}
               >
                 <ArrowUpCircle size={14} />
                 <p>Update available</p>
+                <span
+                  className="ml-auto h-2 w-2 shrink-0 rounded-full bg-primary-bright"
+                  aria-hidden
+                />
               </DropdownMenuItem>
               <DropdownMenuSeparator />
             </>
diff --git a/apps/studio/components/interfaces/Database/Replication/UpdateVersionModal.tsx b/apps/studio/components/interfaces/Database/Replication/UpdateVersionModal.tsx
index 2aa7531d2e8..5629d7239fc 100644
--- a/apps/studio/components/interfaces/Database/Replication/UpdateVersionModal.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/UpdateVersionModal.tsx
@@ -83,24 +83,20 @@ export const UpdateVersionModal = ({ visible, pipeline, onClose }: UpdateVersion
             ? 'A newer pipeline version is available with improvements and bug fixes. The pipeline will restart and continue from where it left off.'
             : 'A newer pipeline version is available with improvements and bug fixes.'}
         </p>
-        <div className="overflow-hidden rounded-md border">
-          <table className="w-full text-sm">
-            <tbody aria-live="polite" aria-atomic="true">
-              <tr className="border-b">
-                <td className="px-3 py-2 text-foreground-lighter">Current</td>
-                <td className="px-3 py-2 text-right text-foreground" translate="no">
-                  {isLoadingVersion ? 'Loading…' : (currentVersionName ?? 'Unknown')}
-                </td>
-              </tr>
-              <tr>
-                <td className="px-3 py-2 text-foreground-lighter">New</td>
-                <td className="px-3 py-2 text-right text-foreground" translate="no">
-                  {isLoadingVersion ? 'Loading…' : (newVersionName ?? 'Unknown')}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        <dl className="divide-y overflow-hidden rounded-md border text-sm" aria-live="polite">
+          <div className="px-3 py-2">
+            <dt className="text-foreground-lighter">Current</dt>
+            <dd className="mt-1 break-all text-foreground" translate="no">
+              {isLoadingVersion ? 'Loading…' : (currentVersionName ?? 'Unknown')}
+            </dd>
+          </div>
+          <div className="px-3 py-2">
+            <dt className="text-foreground-lighter">New</dt>
+            <dd className="mt-1 break-all text-foreground" translate="no">
+              {isLoadingVersion ? 'Loading…' : (newVersionName ?? 'Unknown')}
+            </dd>
+          </div>
+        </dl>
       </div>
     </ConfirmationModal>
   )
diff --git a/apps/studio/pages/project/[ref]/database/pipelines/index.tsx b/apps/studio/pages/project/[ref]/database/pipelines/index.tsx
index 6c030934ed4..fa6223730fb 100644
--- a/apps/studio/pages/project/[ref]/database/pipelines/index.tsx
+++ b/apps/studio/pages/project/[ref]/database/pipelines/index.tsx
@@ -1,3 +1,4 @@
+import { useParams } from 'common'
 import { MessageSquare } from 'lucide-react'
 import { Button } from 'ui'
 import { PageContainer } from 'ui-patterns/PageContainer'
@@ -10,7 +11,7 @@ import {
   PageHeaderTitle,
 } from 'ui-patterns/PageHeader'
 import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
-import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { GenericTableLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { Destinations } from '@/components/interfaces/Database/Replication/Destinations'
 import { PIPELINES_FEEDBACK_URL } from '@/components/interfaces/Database/Replication/Replication.constants'
@@ -22,17 +23,16 @@ import { DocsButton } from '@/components/ui/DocsButton'
 import { UnknownInterface } from '@/components/ui/UnknownInterface'
 import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
-import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { DOCS_URL } from '@/lib/constants'
 import type { NextPageWithLayout } from '@/types'
 
 const DatabasePipelinesPage: NextPageWithLayout = () => {
-  const { data: selectedProject, isPending } = useSelectedProjectQuery()
-  const { isHighAvailability } = useHighAvailability()
+  const { ref: projectRef } = useParams()
+  const { isHighAvailability, isPending } = useHighAvailability()
   const showPgReplicate = useIsFeatureEnabled('database:replication')
 
   if (!showPgReplicate) {
-    return <UnknownInterface urlBack={`/project/${selectedProject?.ref}/database/schemas`} />
+    return <UnknownInterface urlBack={`/project/${projectRef}/database/schemas`} />
   }
 
   if (isHighAvailability) {
@@ -81,16 +81,41 @@ const DatabasePipelinesPage: NextPageWithLayout = () => {
       </PageHeader>
 
       <PageContainer size="large">
-        {isPending ? (
-          <GenericSkeletonLoader />
-        ) : (
-          <PageSection>
-            <PageSectionContent className="flex flex-col gap-12">
-              <ReplicationDiagram />
-              <Destinations />
-            </PageSectionContent>
-          </PageSection>
-        )}
+        <PageSection>
+          <PageSectionContent className="flex flex-col gap-12">
+            {isPending ? (
+              <>
+                <p className="sr-only" role="status">
+                  Loading pipelines
+                </p>
+                <div
+                  className="flex h-[350px] items-center justify-center gap-8 rounded-md border border-muted"
+                  aria-hidden="true"
+                >
+                  <ShimmeringLoader className="h-14 w-36 py-0" />
+                  <ShimmeringLoader className="h-14 w-36 py-0" />
+                </div>
+                <div className="w-full space-y-4" aria-hidden="true">
+                  <div className="flex items-center justify-between">
+                    <ShimmeringLoader className="h-8 w-52 py-0" />
+                    <div className="flex items-center gap-x-2">
+                      <ShimmeringLoader className="h-8 w-8 py-0" />
+                      <ShimmeringLoader className="h-8 w-32 py-0" />
+                    </div>
+                  </div>
+                  <GenericTableLoader
+                    headers={[null, 'Name', 'Status', 'Lag', 'Publication', null]}
+                  />
+                </div>
+              </>
+            ) : (
+              <>
+                <ReplicationDiagram />
+                <Destinations />
+              </>
+            )}
+          </PageSectionContent>
+        </PageSection>
       </PageContainer>
     </>
   )