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)  ## 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.
2026-10-06 01:45:10 +03:00 · 2026-09-29 11:42:58 +10:00
1 parent c415f502ed
commit 5951fb6c47
@@ -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')
@@ -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>
@@ -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>
@@ -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>
@@ -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 ? (
@@ -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 />
            </>
@@ -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>
  )
@@ -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>
    </>
  )