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

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>
     )
   }

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>