From e5dde899cd1da1a178261e130e653dcb9508b985 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Wed, 30 Sep 2026 09:11:19 +1000
Subject: [PATCH] fix(studio): stabilise pipeline header loading (#50964)

## Problem

The pipeline detail header shifts slightly as its loading placeholders
become text.

- Resolves
[DEPR-683](https://linear.app/supabase/issue/DEPR-683/reduce-layout-shift-in-pipeline-header-loading-states)

## Solution

Match the breadcrumb, title, status, and destination placeholders to
their loaded line heights.

## Review instructions

1. Open a pipeline detail page and reload it. Check that the header
height stays steady as its data arrives.

## 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

* **Style**
* Increased the height of loading placeholders for replication pipeline
status, breadcrumbs, page titles, and destination names.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../interfaces/Database/Replication/PipelineStatePill.tsx   | 2 +-
 .../Database/Replication/ReplicationPipelineLayout.tsx      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx b/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx
index b5245b3ea66..3fe8b5e3faf 100644
--- a/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/PipelineStatePill.tsx
@@ -56,7 +56,7 @@ export const PipelineStatePill = ({
     return (
       <span className="inline-flex" aria-live="polite" aria-atomic="true">
         <span className="sr-only">Loading pipeline status</span>
-        <ShimmeringLoader className="w-20" />
+        <ShimmeringLoader className="h-5 w-20 py-0" />
       </span>
     )
   }
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx
index eea85b96784..a4a00f9eca7 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineLayout.tsx
@@ -234,7 +234,7 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
                 {isPipelineLoading ? (
                   <span className="inline-flex items-center">
                     <span className="sr-only">Loading pipeline</span>
-                    <ShimmeringLoader className="h-3 w-24 py-0" />
+                    <ShimmeringLoader className="h-5 w-24 py-0" />
                   </span>
                 ) : (
                   (pipeline?.destination_name ?? 'Pipeline')
@@ -258,7 +258,7 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
             <PageHeaderSummary>
               <PageHeaderTitle>
                 {isPipelineLoading ? (
-                  <span className="inline-flex items-center">
+                  <span className="flex h-8 items-center">
                     <span className="sr-only">Loading pipeline</span>
                     <ShimmeringLoader className="h-6 w-40 py-0" />
                   </span>
@@ -286,7 +286,7 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
                   {isPipelineIdentityLoading ? (
                     <span className="inline-flex items-center">
                       <span className="sr-only">Loading destination</span>
-                      <ShimmeringLoader className="h-3 w-20 py-0" />
+                      <ShimmeringLoader className="h-5 w-20 py-0" />
                     </span>
                   ) : (
                     <span>{destinationType ?? pipeline?.destination_name ?? 'Unknown'}</span>