From 55b3acd68a2601fa556badbe9656f5bb8a2ca4a0 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 12 Sep 2025 11:20:59 +0100
Subject: [PATCH 01/50] Remove vcloak so it doesn't conflict with view
 transitions

---
 resources/views/forms/show.blade.php             | 1 -
 resources/views/layout.blade.php                 | 2 +-
 resources/views/partials/global-header.blade.php | 2 +-
 resources/views/roles/create.blade.php           | 1 -
 resources/views/roles/edit.blade.php             | 1 -
 5 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/resources/views/forms/show.blade.php b/resources/views/forms/show.blade.php
index 34788fbba65..1bb835b0a3f 100644
--- a/resources/views/forms/show.blade.php
+++ b/resources/views/forms/show.blade.php
@@ -107,6 +107,5 @@
         sort-direction="desc"
         :columns="{{ $columns->toJson() }}"
         :filters="{{ $filters->toJson() }}"
-        v-cloak
     ></form-submission-listing>
 @endsection
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index f5e4d53a70f..0442865ef5d 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -26,7 +26,7 @@ class="@yield('content-class') pt-14"
                 >
                     <main id="main" class="flex bg-body-bg dark:bg-dark-body-bg dark:border-t rounded-t-2xl dark:border-dark-body-border fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
                         @include('statamic::partials.nav-main')
-                        <div id="main-content" v-cloak class="main-content p-2 h-full flex-1 overflow-y-auto rounded-t-2xl">
+                        <div id="main-content" class="main-content p-2 h-full flex-1 overflow-y-auto rounded-t-2xl">
                             <div class="relative content-card @yield('content-card-modifiers') min-h-full">
                                 @yield('content')
                             </div>
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 699931c63e1..d65d4a27abb 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -59,7 +59,7 @@
                 <span class="text-gray-500">/</span>
                 <ui-button href="{{ $breadcrumb->url() }}" text="{{ __($breadcrumb->text()) }}" size="sm" variant="ghost"></ui-button>
                 @if($breadcrumb->hasLinks() || $breadcrumb->createUrl())
-                    <ui-dropdown v-cloak class="relative" aria-label="{{ __('More options for') }} {{ __($breadcrumb->text()) }}">
+                    <ui-dropdown class="relative" aria-label="{{ __('More options for') }} {{ __($breadcrumb->text()) }}">
                         <template #trigger>
                             <ui-button
                                 variant="ghost"
diff --git a/resources/views/roles/create.blade.php b/resources/views/roles/create.blade.php
index 79c0dff9938..6b192c96081 100644
--- a/resources/views/roles/create.blade.php
+++ b/resources/views/roles/create.blade.php
@@ -12,6 +12,5 @@
         :can-assign-super="{{ Statamic\Support\Str::bool($user->isSuper()) }}"
         :initial-permissions="{{ json_encode($permissions) }}"
         index-url="{{ cp_route('roles.index') }}"
-        v-cloak
     ></role-publish-form>
 @endsection
diff --git a/resources/views/roles/edit.blade.php b/resources/views/roles/edit.blade.php
index c3d46ad68b0..cf1c74d9c51 100644
--- a/resources/views/roles/edit.blade.php
+++ b/resources/views/roles/edit.blade.php
@@ -14,6 +14,5 @@
         initial-handle="{{ $role->handle() }}"
         :initial-super="{{ Statamic\Support\Str::bool($super) }}"
         :initial-permissions="{{ json_encode($permissions) }}"
-        v-cloak
     ></role-publish-form>
 @endsection

From 473dd67ee39731b63c93cf6082855463c76e49d6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 12 Sep 2025 11:21:36 +0100
Subject: [PATCH 02/50] Remove skeletons so they doesn't conflict with view
 transitions

---
 resources/js/components/collections/Listing.vue      |  9 ---------
 resources/js/components/entries/CollectionWidget.vue |  7 -------
 resources/js/components/forms/FormWidget.vue         |  7 -------
 resources/js/components/ui/Listing/Listing.vue       | 12 ------------
 4 files changed, 35 deletions(-)

diff --git a/resources/js/components/collections/Listing.vue b/resources/js/components/collections/Listing.vue
index 5848cd74fd7..f42613b9262 100644
--- a/resources/js/components/collections/Listing.vue
+++ b/resources/js/components/collections/Listing.vue
@@ -68,15 +68,6 @@
                         :sort-column="collection.sort_column"
                         :sort-direction="collection.sort_direction"
                     >
-                        <template #initializing>
-                            <div class="flex flex-col gap-[9px] justify-between py-1 px-5">
-                                <ui-skeleton class="h-[19px] w-full" />
-                                <ui-skeleton class="h-[19px] w-full" />
-                                <ui-skeleton class="h-[19px] w-full" />
-                                <ui-skeleton class="h-[19px] w-full" />
-                                <ui-skeleton class="h-[19px] w-full" />
-                            </div>
-                        </template>
                         <template #default="{ items }">
                             <table v-if="items.length" class="w-full [&_td]:py-1 [&_td]:px-5 [&_td]:text-sm">
                                 <ui-listing-table-head sr-only />
diff --git a/resources/js/components/entries/CollectionWidget.vue b/resources/js/components/entries/CollectionWidget.vue
index ee05c7b1c09..b8830e99a51 100644
--- a/resources/js/components/entries/CollectionWidget.vue
+++ b/resources/js/components/entries/CollectionWidget.vue
@@ -52,13 +52,6 @@ function formatDate(value) {
         :sort-column="initialSortColumn"
         :sort-direction="initialSortDirection"
     >
-        <template #initializing>
-            <Widget v-bind="widgetProps">
-                <div class="flex flex-col gap-[9px] justify-between py-3 px-4">
-                    <ui-skeleton v-for="i in initialPerPage" class="h-[19px] w-full" />
-                </div>
-            </Widget>
-        </template>
         <template #default="{ items, loading }">
             <Widget v-bind="widgetProps">
                 <ui-description v-if="!items.length" class="flex-1 flex items-center justify-center">
diff --git a/resources/js/components/forms/FormWidget.vue b/resources/js/components/forms/FormWidget.vue
index a0e5d747aa2..2360b9b8bb6 100644
--- a/resources/js/components/forms/FormWidget.vue
+++ b/resources/js/components/forms/FormWidget.vue
@@ -43,13 +43,6 @@ function formatDate(value) {
         :show-pagination-page-links="false"
         :show-pagination-per-page-selector="false"
     >
-        <template #initializing>
-            <Widget v-bind="widgetProps">
-                <div class="flex flex-col gap-4 justify-between p-4">
-                    <ui-skeleton v-for="i in initialPerPage" class="h-3 w-full" />
-                </div>
-            </Widget>
-        </template>
         <template #default="{ items }">
             <Widget v-bind="widgetProps">
                 <ui-description v-if="!items.length" class="flex-1 flex items-center justify-center">
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 39e2a972eca..7bec00e662f 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -664,18 +664,6 @@ autoApplyState();
 </script>
 
 <template>
-    <slot name="initializing" v-if="initializing">
-        <div class="flex flex-col gap-4 justify-between mt-2">
-            <ui-skeleton class="h-3 w-48" />
-            <div class="flex gap-3">
-                <ui-skeleton class="h-8 w-80" />
-                <ui-skeleton class="h-8 w-24" />
-                <div class="flex-1" />
-                <ui-skeleton class="size-8" />
-            </div>
-            <ui-skeleton class="h-48 w-full" />
-        </div>
-    </slot>
     <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
         <Presets v-if="showPresets" />
         <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative flex items-center gap-3 min-h-16">

From 3f2c8b91c980c52b1674407550b1933e8ee953e5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 12 Sep 2025 11:23:09 +0100
Subject: [PATCH 03/50] View transitions - block the page from rendering until
 it's ready

---
 resources/views/partials/head.blade.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
index a6872e0b429..36326cd396d 100644
--- a/resources/views/partials/head.blade.php
+++ b/resources/views/partials/head.blade.php
@@ -57,4 +57,6 @@
 }
 </style>
 
+<link rel="expect" href="#main-content" blocking="render" />
+
 @stack('head')

From a8585f8460b128a1000ea2f01b9ae6e98724a52e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 12 Sep 2025 11:44:10 +0100
Subject: [PATCH 04/50] Experiments

---
 resources/css/app.css                         | 32 +++++++++++++++
 .../views/partials/global-header.blade.php    | 40 ++++++++++---------
 2 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 9379635cf82..b43288173a5 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -42,3 +42,35 @@
     border-color: var(--color-gray-300, currentColor);
   }
 }
+
+/* @media (prefers-reduced-motion: no-preference) { */
+    @view-transition {
+       navigation: auto;
+    }
+/* } */
+
+::view-transition-group(root) {
+    /* Delay slightly to smooth things out. Bear in mind 0.25 is the default - https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-old */
+    /* animation-duration: 5s; */
+}
+::view-transition-new(root) {
+    /* animation-delay: 100ms; */
+  }
+
+  ::view-transition-group(header) {
+    /* animation-duration: 1s; */
+  }
+
+
+/* ::view-transition-old(root) {
+    animation-duration: 150ms;
+  }
+  ::view-transition-new(root) {
+    animation: 150ms 100ms both slide-up;
+  }
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(10vh);
+    }
+  } */
\ No newline at end of file
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index d65d4a27abb..fba6c5119dc 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -4,7 +4,7 @@
 
 @inject('licenses', 'Statamic\Licensing\LicenseManager')
 
-<header class="h-14 bg-global-header-bg dark:bg-dark-global-header-bg flex justify-between space-x-2 items-center text-white px-4 fixed overflow-x-auto top-0 inset-x-0 z-[3]">
+<header style="view-transition-name: header" class="h-14 bg-global-header-bg dark:bg-dark-global-header-bg flex justify-between space-x-2 items-center text-white px-4 fixed overflow-x-auto top-0 inset-x-0 z-[3]">
     <a class="c-skip-link z-(--z-index-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main">
         {{ __('Skip to sidebar') }}
     </a>
@@ -32,24 +32,26 @@
                 {{ $customLogoText ?? config('app.name') }}
             </a>
             @if (Statamic::pro())
-                @if ($licenses->valid())
-                    <ui-badge size="sm" variant="flat" text="{{ __('Pro') }}" class="hidden sm:block select-none bg-white/15!" />
-                @else
-                    <ui-tooltip :text="{{ $licenses->requestFailed() ? "'".$licenses->requestFailureMessage()."'" : 'null' }}">
-                        <ui-badge
-                            @if ($licenses->requestFailed())
-                                color="yellow"
-                                icon="alert-warning-exclamation-mark"
-                            @elseif ($licenses->isOnPublicDomain())
-                                color="red"
-                            @else
-                                color="green"
-                            @endif
-                            href="{{ cp_route('utilities.licensing') }}"
-                            text="{{ __('Pro') }} – {{ $licenses->isOnPublicDomain() ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}"
-                        ></ui-badge>
-                    </ui-tooltip>
-                @endif
+                <div class="hidden sm:block select-none min-w-[300px] h-6 flex items-center">
+                    @if ($licenses->valid())
+                        <ui-badge size="sm" variant="flat" text="{{ __('Pro') }}" class="bg-white/15!" />
+                    @else
+                        <ui-tooltip :text="{{ $licenses->requestFailed() ? "'".$licenses->requestFailureMessage()."'" : 'null' }}">
+                            <ui-badge
+                                @if ($licenses->requestFailed())
+                                    color="yellow"
+                                    icon="alert-warning-exclamation-mark"
+                                @elseif ($licenses->isOnPublicDomain())
+                                    color="red"
+                                @else
+                                    color="green"
+                                @endif
+                                href="{{ cp_route('utilities.licensing') }}"
+                                text="{{ __('Pro') }} – {{ $licenses->isOnPublicDomain() ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}"
+                            ></ui-badge>
+                        </ui-tooltip>
+                    @endif
+                </div>
             @endif
         </div>
         @endif

From ada68223e7920faaffdf49059c5d0917c87ba6c4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 12 Sep 2025 12:00:38 +0100
Subject: [PATCH 05/50] Restore transitions

---
 resources/css/app.css | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/resources/css/app.css b/resources/css/app.css
index a8c346b6a13..b3d9faff54f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -64,3 +64,35 @@
         background: var(--theme-color-dark-content-bg);
     }
 }
+
+/* @media (prefers-reduced-motion: no-preference) { */
+@view-transition {
+    navigation: auto;
+ }
+/* } */
+
+::view-transition-group(root) {
+ /* Delay slightly to smooth things out. Bear in mind 0.25 is the default - https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-old */
+ /* animation-duration: 5s; */
+}
+::view-transition-new(root) {
+ /* animation-delay: 100ms; */
+}
+
+::view-transition-group(header) {
+ /* animation-duration: 1s; */
+}
+
+
+/* ::view-transition-old(root) {
+ animation-duration: 150ms;
+}
+::view-transition-new(root) {
+ animation: 150ms 100ms both slide-up;
+}
+@keyframes slide-up {
+ from {
+   opacity: 0;
+   transform: translateY(10vh);
+ }
+} */
\ No newline at end of file

From 569d93f78b3b98769d857bb906a9b3b894a3427a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 12 Sep 2025 12:25:16 +0100
Subject: [PATCH 06/50] Revert some earlier experiments in favour of v-cloak

---
 .../views/partials/global-header.blade.php    | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 86b833e1d42..7d860160908 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -32,31 +32,29 @@
                 {{ $customLogoText ?? config('app.name') }}
             </a>
             @if (Statamic::pro())
-                <div class="hidden sm:block select-none min-w-[300px] h-6 flex items-center">
-                    @if ($licenses->valid())
-                        <ui-badge size="sm" variant="flat" text="{{ __('Pro') }}" class="bg-white/15!" />
-                    @else
-                        <ui-tooltip :text="{{ $licenses->requestFailed() ? "'".$licenses->requestFailureMessage()."'" : 'null' }}">
-                            <ui-badge
-                                @if ($licenses->requestFailed())
-                                    color="yellow"
-                                    icon="alert-warning-exclamation-mark"
-                                @elseif ($licenses->isOnPublicDomain())
-                                    color="red"
-                                @else
-                                    color="green"
-                                @endif
-                                href="{{ cp_route('utilities.licensing') }}"
-                                text="{{ __('Pro') }} – {{ $licenses->isOnPublicDomain() ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}"
-                            ></ui-badge>
-                        </ui-tooltip>
-                    @endif
-                </div>
+                @if ($licenses->valid())
+                    <ui-badge size="sm" variant="flat" text="{{ __('Pro') }}" class="hidden sm:block select-none bg-white/15!" />
+                @else
+                    <ui-tooltip :text="{{ $licenses->requestFailed() ? "'".$licenses->requestFailureMessage()."'" : 'null' }}">
+                        <ui-badge
+                            @if ($licenses->requestFailed())
+                                color="yellow"
+                                icon="alert-warning-exclamation-mark"
+                            @elseif ($licenses->isOnPublicDomain())
+                                color="red"
+                            @else
+                                color="green"
+                            @endif
+                            href="{{ cp_route('utilities.licensing') }}"
+                            text="{{ __('Pro') }} – {{ $licenses->isOnPublicDomain() ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}"
+                        ></ui-badge>
+                    </ui-tooltip>
+                @endif
             @endif
         </div>
         @endif
 
-        <div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs>
+        <div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs v-cloak>
             @foreach($breadcrumbs as $breadcrumb)
                 <span class="text-white/30">/</span>
                 <ui-button href="{{ $breadcrumb->url() }}" text="{{ __($breadcrumb->text()) }}" size="sm" variant="ghost" class="dark:text-white/85! hover:text-white! px-2! mr-1.75"></ui-button>

From 192fa940faed9fa23763888cd6e7070ff0642409 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 12 Sep 2025 15:18:16 +0100
Subject: [PATCH 07/50] Wrap up demo

---
 packages/ui/src/Header.vue                    |  2 +-
 packages/ui/src/Panel/Panel.vue               |  2 +-
 resources/css/app.css                         |  5 ----
 resources/css/core/animation.css              | 28 +++++++++++++++++++
 .../js/components/ui/Listing/Listing.vue      |  2 +-
 .../js/components/ui/Listing/Presets.vue      |  2 +-
 resources/views/collections/empty.blade.php   |  2 +-
 .../views/components/docs-callout.blade.php   |  2 +-
 .../views/partials/global-header.blade.php    |  4 ++-
 9 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/Header.vue b/packages/ui/src/Header.vue
index 5ce00e4c8d6..be7746db4b9 100644
--- a/packages/ui/src/Header.vue
+++ b/packages/ui/src/Header.vue
@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <header class="flex flex-wrap items-center justify-between gap-4 py-8" data-ui-header>
+    <header class="flex flex-wrap items-center justify-between gap-4 py-8 entry-animate-in" data-ui-header>
         <h1 class="text-[25px] leading-[1.25] st-text-legibility font-medium antialiased flex items-center gap-2.5 flex-1">
             <!-- Wrap icon in a fixed size div (the same size as the icon) to prevent layout shift once it loads -->
             <div v-if="icon" class="size-5">
diff --git a/packages/ui/src/Panel/Panel.vue b/packages/ui/src/Panel/Panel.vue
index 40f2ad6f7be..e6c1b2e4cc1 100644
--- a/packages/ui/src/Panel/Panel.vue
+++ b/packages/ui/src/Panel/Panel.vue
@@ -13,7 +13,7 @@ const props = defineProps({
     <div
         :class="[
             'relative bg-gray-200/50 dark:bg-gray-950 dark:inset-shadow-2xs dark:inset-shadow-black',
-            'w-full rounded-2xl mb-5 p-1.5 [&:has([data-ui-panel-header])]:pt-0 focus-none',
+            'w-full rounded-2xl mb-5 p-1.5 [&:has([data-ui-panel-header])]:pt-0 focus-none entry-animate-in entry-animate-in--siblings',
         ]"
         data-ui-panel
     >
diff --git a/resources/css/app.css b/resources/css/app.css
index b3d9faff54f..85df9036fc4 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -65,11 +65,6 @@
     }
 }
 
-/* @media (prefers-reduced-motion: no-preference) { */
-@view-transition {
-    navigation: auto;
- }
-/* } */
 
 ::view-transition-group(root) {
  /* Delay slightly to smooth things out. Bear in mind 0.25 is the default - https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-old */
diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index d7947e25a62..bcf2ba34b33 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -55,3 +55,31 @@
         animation: rotate 4s linear infinite;
     }
 }
+
+/* ENTRY ANIMATIONS 
+=================================================== */
+/* Notes...
+
+    What does it do?
+    ----------------
+    - Soft-animates an element on page load using @starting-style
+    - These should be almost-instant otherwise they'll get annoying
+
+*/
+/* HTML Example...
+
+*/
+.entry-animate-in {
+    transition: opacity 0.2s;
+    @starting-style {
+        opacity: 0;
+    }
+}
+
+.entry-animate-in--quick {
+    transition: opacity 0.1s;
+}
+
+.entry-animate-in--siblings {
+    transition-delay: calc(sibling-index() * 0.02s);
+}
\ No newline at end of file
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 7a21d20b51f..8ff81e8fd3e 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -670,7 +670,7 @@ autoApplyState();
 <template>
     <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
         <Presets v-if="showPresets" />
-        <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative flex items-center gap-3 min-h-16">
+        <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative flex items-center gap-3 min-h-16 entry-animate-in entry-animate-in--siblings">
             <div class="flex flex-1 items-center gap-3 w-full">
                 <Search v-if="allowSearch" />
                 <Filters v-if="hasFilters" />
diff --git a/resources/js/components/ui/Listing/Presets.vue b/resources/js/components/ui/Listing/Presets.vue
index 8ace9e4d924..3607673d896 100644
--- a/resources/js/components/ui/Listing/Presets.vue
+++ b/resources/js/components/ui/Listing/Presets.vue
@@ -160,7 +160,7 @@ function deletePreset() {
 
 <template>
     <div
-        class="relative flex shrink-0 space-x-2 border-b border-gray-200 text-sm text-gray-500 dark:border-gray-700/50 dark:text-gray-500"
+        class="relative flex shrink-0 space-x-2 border-b border-gray-200 text-sm text-gray-500 dark:border-gray-700/50 dark:text-gray-500 entry-animate-in"
     >
         <PresetTrigger :active="!activePreset" @click="viewAll" :text="__('All')" />
         <PresetTrigger
diff --git a/resources/views/collections/empty.blade.php b/resources/views/collections/empty.blade.php
index 9ae77a037d0..a16d7c998be 100644
--- a/resources/views/collections/empty.blade.php
+++ b/resources/views/collections/empty.blade.php
@@ -5,7 +5,7 @@
 @section('content-card-modifiers', 'bg-architectural-lines')
 
 @section('content')
-    <header class="py-8 mt-8 text-center">
+    <header class="py-8 mt-8 text-center entry-animate-in" v-cloak>
         <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-3">
             <ui-icon name="collections" class="size-5 text-gray-500"></ui-icon>
             <span v-pre>{{ $collection->title() }}</span>
diff --git a/resources/views/components/docs-callout.blade.php b/resources/views/components/docs-callout.blade.php
index 0a0a3f1d5da..9c5fbaeacf6 100644
--- a/resources/views/components/docs-callout.blade.php
+++ b/resources/views/components/docs-callout.blade.php
@@ -3,7 +3,7 @@
 @endphp
 
 @if (config('statamic.cp.link_to_docs'))
-    <div class="mt-12 flex justify-center text-center">
+    <div class="mt-12 flex justify-center text-center entry-animate-in entry-animate-in--siblings">
         <ui-command-palette-item
             :text="[__('Statamic Documentation'), '{{ $topic }}']"
             icon="book-next-page"
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 7d860160908..6c8ea2e7993 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -56,6 +56,7 @@
 
         <div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs v-cloak>
             @foreach($breadcrumbs as $breadcrumb)
+                <div class="items-center gap-2 md:flex entry-animate-in entry-animate-in--quick">
                 <span class="text-white/30">/</span>
                 <ui-button href="{{ $breadcrumb->url() }}" text="{{ __($breadcrumb->text()) }}" size="sm" variant="ghost" class="dark:text-white/85! hover:text-white! px-2! mr-1.75"></ui-button>
                 @if($breadcrumb->hasLinks() || $breadcrumb->createUrl())
@@ -106,12 +107,13 @@ class="grid grid-cols-[auto_1fr_auto] items-center"
                             ></ui-button>
                         @endif
                     </ui-dropdown>
+                    </div>
                 @endif
             @endforeach
         </div>
     </div>
 
-    <div class="dark flex-1 flex gap-1 md:gap-3 items-center justify-end shrink-0">
+    <div class="dark flex-1 flex gap-1 md:gap-3 items-center justify-end shrink-0 entry-animate-in entry-animate-in--quick">
         @if (Statamic\Facades\Site::authorized()->count() > 1)
             <global-site-selector></global-site-selector>
         @endif

From 3f3ebba0850acbc43de91b2bf822ac730f1ec9f6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 12 Sep 2025 15:29:31 +0100
Subject: [PATCH 08/50] Tweak animation value

---
 resources/css/core/animation.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index bcf2ba34b33..4b68d06891e 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -81,5 +81,5 @@
 }
 
 .entry-animate-in--siblings {
-    transition-delay: calc(sibling-index() * 0.02s);
+    transition-delay: calc(sibling-index() * 0.015s);
 }
\ No newline at end of file

From 43bd9963ab8dd0764790a39b1f3babb632a47ade Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 12 Sep 2025 15:37:14 +0100
Subject: [PATCH 09/50] Add view transitions back

---
 resources/css/core/animation.css | 35 ++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index 4b68d06891e..170d004c370 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -62,24 +62,33 @@
 
     What does it do?
     ----------------
+    - View transitions are effectively used to fade the page _out_
     - Soft-animates an element on page load using @starting-style
     - These should be almost-instant otherwise they'll get annoying
 
 */
-/* HTML Example...
-
-*/
-.entry-animate-in {
-    transition: opacity 0.2s;
-    @starting-style {
-        opacity: 0;
+@media (prefers-reduced-motion: no-preference) {
+    @view-transition {
+        navigation: auto;
     }
-}
 
-.entry-animate-in--quick {
-    transition: opacity 0.1s;
-}
+    ::view-transition-group(root) {
+        /* Speed up the view transition. Bear in mind 0.25 is the default - https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-old */
+        animation-duration: 0.1s;
+    }
 
-.entry-animate-in--siblings {
-    transition-delay: calc(sibling-index() * 0.015s);
+    .entry-animate-in {
+        transition: opacity 0.2s;
+        @starting-style {
+            opacity: 0;
+        }
+    }
+    
+    .entry-animate-in--quick {
+        transition: opacity 0.1s;
+    }
+    
+    .entry-animate-in--siblings {
+        transition-delay: calc(sibling-index() * 0.015s);
+    }
 }
\ No newline at end of file

From 36348bffe5176e1227ff0fa0ae0ff1a968f93dc1 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 12 Sep 2025 18:26:18 +0100
Subject: [PATCH 10/50] Make sibling delay a touch snappier

---
 resources/css/core/animation.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index 170d004c370..ce1efd59ffa 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -89,6 +89,6 @@
     }
     
     .entry-animate-in--siblings {
-        transition-delay: calc(sibling-index() * 0.015s);
+        transition-delay: calc(sibling-index() * 0.01s);
     }
 }
\ No newline at end of file

From 9e02640d61a833c40d95e334d488a1024da8708b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 11:05:00 +0100
Subject: [PATCH 11/50] View Transitions - Fix newer global header layout on
 pages like Dashboard

---
 resources/views/partials/global-header.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 6c8ea2e7993..956feff154b 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -11,7 +11,7 @@
     <a class="c-skip-link z-(--z-index-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main-content">
         {{ __('Skip to content') }}
     </a>
-    <div class="dark flex items-center gap-2 text-[0.8125rem] text-white/85">
+    <div class="dark flex items-center gap-2 text-[0.8125rem] text-white/85 w-full">
          {{-- Logo --}}
         @if ($customDarkLogo)
             <button class="flex items-center group cursor-pointer text-white/85 hover:text-white" type="button" @click="toggleNav" aria-label="{{ __('Toggle Nav') }}">

From 27e57088f50abd917349e5b9b41939b45f570268 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 11:30:54 +0100
Subject: [PATCH 12/50] View Transitions / Dashboard view

---
 resources/css/core/animation.css              | 6 +++---
 resources/js/components/ui/Widget.vue         | 2 +-
 resources/views/dashboard/dashboard.blade.php | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index ce1efd59ffa..542c151ce53 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -56,7 +56,7 @@
     }
 }
 
-/* ENTRY ANIMATIONS 
+/* ENTRY ANIMATIONS
 =================================================== */
 /* Notes...
 
@@ -83,11 +83,11 @@
             opacity: 0;
         }
     }
-    
+
     .entry-animate-in--quick {
         transition: opacity 0.1s;
     }
-    
+
     .entry-animate-in--siblings {
         transition-delay: calc(sibling-index() * 0.01s);
     }
diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index c1060293c17..cb23ea726a4 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-    <Card inset class="@container/widget">
+    <Card inset class="@container/widget min-h-54 entry-animate-in" v-cloak>
         <div class="flex h-full min-h-54 flex-col">
             <header class="flex items-center min-h-[49px] justify-between border-b border-gray-200 px-4.5 py-2 dark:border-gray-700">
                 <div class="flex items-center gap-3">
diff --git a/resources/views/dashboard/dashboard.blade.php b/resources/views/dashboard/dashboard.blade.php
index f6c577167c7..baf88f3fb65 100644
--- a/resources/views/dashboard/dashboard.blade.php
+++ b/resources/views/dashboard/dashboard.blade.php
@@ -11,7 +11,7 @@
 
 <div class="widgets @container/widgets flex flex-wrap py-2 gap-y-6 -mx-3">
     @foreach ($widgets as $widget)
-        <div class="{{ Statamic\Support\Str::tailwindWidthClass($widget['width']) }} {{ $widget['classes'] }} px-3">
+        <div class="{{ Statamic\Support\Str::tailwindWidthClass($widget['width']) }} {{ $widget['classes'] }} min-h-54 px-3 entry-animate-in entry-animate-in--siblings">
             {!! $widget['html'] !!}
         </div>
     @endforeach

From e1843cefb458379d62c8876698ddc0b35d52baa1 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 11:57:22 +0100
Subject: [PATCH 13/50] View Transitions / rows on collection grid/dashboard

---
 resources/js/components/ui/Listing/TableBody.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Listing/TableBody.vue b/resources/js/components/ui/Listing/TableBody.vue
index 099fce05448..2aacb1d2bd1 100644
--- a/resources/js/components/ui/Listing/TableBody.vue
+++ b/resources/js/components/ui/Listing/TableBody.vue
@@ -78,7 +78,7 @@ function handleRowClick(event, index) {
             <tr
                 v-for="(row, index) in items"
                 :key="row.id"
-                class="sortable-row outline-hidden"
+                class="sortable-row outline-hidden entry-animate-in entry-animate-in--siblings"
                 :data-row="isSelected(row.id) ? 'selected' : 'unselected'"
                 @click="handleRowClick($event, index)"
             >

From 2a9d9d6eda92f4c14c357e41cf2773ea066dc361 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 12:52:47 +0100
Subject: [PATCH 14/50] View Transitions / add animation to an entry, including
 setting defaults for publish fields

---
 resources/css/core/animation.css            | 9 +++++++--
 resources/js/components/ui/Publish/Tabs.vue | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index 542c151ce53..69eb5de9792 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -77,7 +77,9 @@
         animation-duration: 0.1s;
     }
 
-    .entry-animate-in {
+    .entry-animate-in,
+    .entry-animate-in-children > *,
+    .publish-fields > * {
         transition: opacity 0.2s;
         @starting-style {
             opacity: 0;
@@ -88,7 +90,10 @@
         transition: opacity 0.1s;
     }
 
-    .entry-animate-in--siblings {
+    .entry-animate-in--siblings,
+    /* Assume that when we're animating children we want a sibling delay */
+    .entry-animate-in-children > *,
+    .publish-fields > * {
         transition-delay: calc(sibling-index() * 0.01s);
     }
 }
\ No newline at end of file
diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 4d942f9ecee..83a9ba57030 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -119,7 +119,7 @@ function tabHasError(tab) {
                     </TabProvider>
                 </template>
 
-                <aside class="space-y-6" v-if="shouldShowSidebar">
+                <aside class="space-y-6 entry-animate-in-children" v-if="shouldShowSidebar">
                     <slot name="actions" />
                     <TabProvider v-if="sidebarTab" :tab="sidebarTab">
                         <Sections />

From e0fea3b6b4614bb888c8ee87b2de23f5ddc3eee5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 13:21:01 +0100
Subject: [PATCH 15/50] View Transitions > Blueprints > Index

---
 resources/views/blueprints/index.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/blueprints/index.blade.php b/resources/views/blueprints/index.blade.php
index 958fa06b792..f77fc506fed 100644
--- a/resources/views/blueprints/index.blade.php
+++ b/resources/views/blueprints/index.blade.php
@@ -4,7 +4,7 @@
 @section('title', __('Blueprints'))
 
 @section('content')
-    <ui-header title="{{ __('Blueprints') }}" icon="blueprints">
+    <ui-header title="{{ __('Blueprints') }}" icon="blueprints" v-cloak>
         <ui-dropdown>
             <template #trigger>
                 <ui-button
@@ -44,7 +44,7 @@
         </ui-dropdown>
     </ui-header>
 
-    <section class="space-y-6">
+    <section class="space-y-6 entry-animate-in-children" v-cloak>
     @if (Statamic\Facades\Collection::all()->count() > 0)
         <ui-subheading size="lg" class="mb-2">{{ __('Collections') }}</ui-subheading>
             <ui-panel>

From 5805262cab9eb7d8fb3dd96744f9c92379e7288e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 13:26:47 +0100
Subject: [PATCH 16/50] View Transitions > Blueprints > Single

---
 resources/css/core/animation.css              | 6 ++++--
 resources/js/components/blueprints/Fields.vue | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index 69eb5de9792..42c333092a3 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -79,7 +79,8 @@
 
     .entry-animate-in,
     .entry-animate-in-children > *,
-    .publish-fields > * {
+    .publish-fields > *,
+    .publish-fields-fluid > *  {
         transition: opacity 0.2s;
         @starting-style {
             opacity: 0;
@@ -93,7 +94,8 @@
     .entry-animate-in--siblings,
     /* Assume that when we're animating children we want a sibling delay */
     .entry-animate-in-children > *,
-    .publish-fields > * {
+    .publish-fields > *,
+    .publish-fields-fluid > * {
         transition-delay: calc(sibling-index() * 0.01s);
     }
 }
\ No newline at end of file
diff --git a/resources/js/components/blueprints/Fields.vue b/resources/js/components/blueprints/Fields.vue
index 6ac0cdc529c..f8cd4588232 100644
--- a/resources/js/components/blueprints/Fields.vue
+++ b/resources/js/components/blueprints/Fields.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div
-            class="blueprint-section-draggable-zone field-grid gap-2! mb-4"
+            class="blueprint-section-draggable-zone field-grid gap-2! mb-4 entry-animate-in-children"
             :data-tab="tabId"
             :data-section="sectionId"
         >

From 81104945144bcb99e43df5ac787e4a0a192a33fa Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 13:30:05 +0100
Subject: [PATCH 17/50] View Transitions > Updates

---
 resources/js/components/updater/Updater.vue | 2 +-
 resources/views/nav/updates.blade.php       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/updater/Updater.vue b/resources/js/components/updater/Updater.vue
index 7444d9d408b..89752b476ad 100644
--- a/resources/js/components/updater/Updater.vue
+++ b/resources/js/components/updater/Updater.vue
@@ -7,7 +7,7 @@
             </template>
         </ui-header>
 
-        <ui-card v-if="gettingChangelog" class="text-center">
+        <ui-card v-if="gettingChangelog" class="text-center entry-animate-in" v-cloak>
             <Icon name="loading" />
         </ui-card>
 
diff --git a/resources/views/nav/updates.blade.php b/resources/views/nav/updates.blade.php
index 71b155d48d4..038726c0a1f 100644
--- a/resources/views/nav/updates.blade.php
+++ b/resources/views/nav/updates.blade.php
@@ -1,5 +1,5 @@
 <li>
-    <a href="{{ $item->url() }}" class="flex items-center gap-3 {{ $item->isActive() ? 'active' : '' }}">
+    <a href="{{ $item->url() }}" class="flex items-centerb gap-3 {{ $item->isActive() ? 'active' : '' }}">
         @cp_svg('icons/updates', 'size-4 shrink-0')
         <span v-pre>{{ __($item->name()) }}</span>
         <updates-badge class="-ml-1.5"></updates-badge>

From bc2d242167e836eb307770922910a02c140b7d10 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 13:32:31 +0100
Subject: [PATCH 18/50] View Transitions > Utilities > Index

---
 resources/views/utilities/index.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/utilities/index.blade.php b/resources/views/utilities/index.blade.php
index 10dec8f3f08..b8449451d30 100644
--- a/resources/views/utilities/index.blade.php
+++ b/resources/views/utilities/index.blade.php
@@ -9,7 +9,7 @@
     <ui-header title="{{ __('Utilities') }}" icon="utilities" />
 
     <ui-card-panel>
-        <div class="flex flex-wrap">
+        <div class="flex flex-wrap entry-animate-in-children" v-cloak>
             @foreach ($utilities as $utility)
                 <a
                     href="{{ $utility->url() }}"

From 76413653eeef6bdd1cc85736207fad114bb9d78e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 14:03:06 +0100
Subject: [PATCH 19/50] View Transitions > Utilities > sub pages

---
 resources/views/licensing.blade.php         | 2 +-
 resources/views/utilities/cache.blade.php   | 2 +-
 resources/views/utilities/email.blade.php   | 1 +
 resources/views/utilities/git.blade.php     | 2 +-
 resources/views/utilities/phpinfo.blade.php | 2 +-
 resources/views/utilities/search.blade.php  | 4 ++--
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/resources/views/licensing.blade.php b/resources/views/licensing.blade.php
index 929cda09012..afab3ad1231 100644
--- a/resources/views/licensing.blade.php
+++ b/resources/views/licensing.blade.php
@@ -37,7 +37,7 @@
         </ui-card>
     @else
 
-        <section class="space-y-6">
+        <section class="space-y-6" v-cloak>
             @if ($configCached)
                 <ui-card-panel heading="{{ __('Configuration is cached') }}">
                     <p class="text-gray-700 text-sm">{!! __('statamic::messages.licensing_config_cached_warning') !!}</p>
diff --git a/resources/views/utilities/cache.blade.php b/resources/views/utilities/cache.blade.php
index f2dea49835e..ff2687ada88 100644
--- a/resources/views/utilities/cache.blade.php
+++ b/resources/views/utilities/cache.blade.php
@@ -26,7 +26,7 @@
             </ui-command-palette-item>
         </form>
     </ui-header>
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" v-cloak>
 
         <ui-panel class="h-full flex flex-col">
             <ui-panel-header class="flex items-center justify-between min-h-10">
diff --git a/resources/views/utilities/email.blade.php b/resources/views/utilities/email.blade.php
index 3007ea62199..2a55b3f4f39 100644
--- a/resources/views/utilities/email.blade.php
+++ b/resources/views/utilities/email.blade.php
@@ -34,6 +34,7 @@
     class="mt-6"
     heading="{{ __('Configuration') }}"
     subheading="{{ __('statamic::messages.email_utility_configuration_description', ['path' => config_path('mail.php')]) }}"
+    v-cloak
 >
     <ui-table>
         <ui-table-rows>
diff --git a/resources/views/utilities/git.blade.php b/resources/views/utilities/git.blade.php
index 2ffecb7d09c..37588aa00e8 100644
--- a/resources/views/utilities/git.blade.php
+++ b/resources/views/utilities/git.blade.php
@@ -18,7 +18,7 @@
 
 @if ($statuses)
     @foreach ($statuses as $path => $status)
-        <ui-card-panel heading="{{ __('Repository') }}" subheading="{{ $path }}">
+        <ui-card-panel heading="{{ __('Repository') }}" subheading="{{ $path }}" v-cloak>
             <div class="space-y-4">
                 <div class="flex flex-wrap gap-2">
                     <ui-badge :prepend="__('Affected files')">
diff --git a/resources/views/utilities/phpinfo.blade.php b/resources/views/utilities/phpinfo.blade.php
index 440459a0e64..a96f6cb7cb9 100644
--- a/resources/views/utilities/phpinfo.blade.php
+++ b/resources/views/utilities/phpinfo.blade.php
@@ -9,7 +9,7 @@
 
 <ui-header title="{{ __('PHP Info') }}" icon="info"></ui-header>
 
-<section class="space-y-6">
+<section class="space-y-6" v-cloak>
     <ui-card-panel heading="{{ __('PHP version') }}">
         <ui-table>
             <ui-table-row>
diff --git a/resources/views/utilities/search.blade.php b/resources/views/utilities/search.blade.php
index 1fdeccf52bf..0ea34399241 100644
--- a/resources/views/utilities/search.blade.php
+++ b/resources/views/utilities/search.blade.php
@@ -7,7 +7,7 @@
 
 @section('content')
 
-<ui-header title="{{ __('Search') }}" icon="magnifying-glass">
+<ui-header title="{{ __('Search') }}" icon="magnifying-glass" v-cloak>
     <form method="POST" action="{{ cp_route('utilities.search', 'all') }}">
         @csrf
 
@@ -19,7 +19,7 @@
     </form>
 </ui-header>
 
-<ui-card-panel heading="{{ __('Search Indexes') }}">
+<ui-card-panel heading="{{ __('Search Indexes') }}" v-cloak>
     @if ($errors->has('indexes'))
         <ui-error-message :text="$errors->first()" class="p-4" />
     @endif

From 802d61e923049dd942d3015666f7e159c348f0d5 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 14:09:41 +0100
Subject: [PATCH 20/50] View Transitions > nav and permissions

---
 resources/views/nav/index.blade.php         | 2 +-
 resources/views/preferences/index.blade.php | 2 +-
 resources/views/usergroups/empty.blade.php  | 2 +-
 resources/views/usergroups/show.blade.php   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/views/nav/index.blade.php b/resources/views/nav/index.blade.php
index e6bf36f1135..7b4301d504a 100644
--- a/resources/views/nav/index.blade.php
+++ b/resources/views/nav/index.blade.php
@@ -8,7 +8,7 @@
 @section('content')
     <ui-header title="{{ __('CP Nav Preferences') }}"></ui-header>
 
-    <section class="space-y-6">
+    <section class="space-y-6" v-cloak>
         <ui-card-panel heading="{{ __('Global Preferences') }}">
             <div class="flex items-center justify-between">
                 <div class="flex items-center gap-3">
diff --git a/resources/views/preferences/index.blade.php b/resources/views/preferences/index.blade.php
index 395f2f10b55..a93ec23350d 100644
--- a/resources/views/preferences/index.blade.php
+++ b/resources/views/preferences/index.blade.php
@@ -8,7 +8,7 @@
 @section('content')
     <ui-header :title="__('Preferences')" icon="preferences" />
 
-    <section class="space-y-6">
+    <section class="space-y-6" v-cloak>
         <ui-card-panel heading="{{ __('Global Preferences') }}">
             <div class="flex items-center justify-between">
                 <div class="flex items-center gap-3">
diff --git a/resources/views/usergroups/empty.blade.php b/resources/views/usergroups/empty.blade.php
index c80fef5a696..7af3d0188fe 100644
--- a/resources/views/usergroups/empty.blade.php
+++ b/resources/views/usergroups/empty.blade.php
@@ -5,7 +5,7 @@
 @section('content-card-modifiers', 'bg-architectural-lines')
 
 @section('content')
-    <header class="py-8 mt-8 text-center">
+    <header class="py-8 mt-8 text-center entry-animate-in" v-cloak>
         <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-3">
             <ui-icon name="groups" class="size-5 text-gray-500"></ui-icon>
             {{ __('User Groups') }}
diff --git a/resources/views/usergroups/show.blade.php b/resources/views/usergroups/show.blade.php
index 9ba1cce74a0..b24834f692c 100644
--- a/resources/views/usergroups/show.blade.php
+++ b/resources/views/usergroups/show.blade.php
@@ -6,7 +6,7 @@
 @section('title', Statamic::crumb($group->title(), 'User Group'))
 
 @section('content')
-    <ui-header title="{{ __($group->title()) }}" icon="groups">
+    <ui-header title="{{ __($group->title()) }}" icon="groups" v-cloak>
         @can('delete', $group)
             <ui-command-palette-item
                 category="{{ Statamic\CommandPalette\Category::Actions }}"

From d5e87a1471141bd16197a06bea08d533701ad3d6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 14:22:55 +0100
Subject: [PATCH 21/50] Remove draft CSS that I moved to animations.css

---
 resources/css/app.css | 29 +----------------------------
 1 file changed, 1 insertion(+), 28 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 85df9036fc4..061c1cffbd7 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -63,31 +63,4 @@
     .dark .content-card {
         background: var(--theme-color-dark-content-bg);
     }
-}
-
-
-::view-transition-group(root) {
- /* Delay slightly to smooth things out. Bear in mind 0.25 is the default - https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-old */
- /* animation-duration: 5s; */
-}
-::view-transition-new(root) {
- /* animation-delay: 100ms; */
-}
-
-::view-transition-group(header) {
- /* animation-duration: 1s; */
-}
-
-
-/* ::view-transition-old(root) {
- animation-duration: 150ms;
-}
-::view-transition-new(root) {
- animation: 150ms 100ms both slide-up;
-}
-@keyframes slide-up {
- from {
-   opacity: 0;
-   transform: translateY(10vh);
- }
-} */
\ No newline at end of file
+}
\ No newline at end of file

From 95c509fa954620c6bf025239e58c3f176349f949 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 15 Sep 2025 12:21:38 -0400
Subject: [PATCH 22/50] Right hand side items in global header get initially
 rendered with blade to reduce pop in

---
 .../command-palette/CommandPalette.vue        | 14 +----------
 resources/views/components/avatar.blade.php   |  2 +-
 .../components/command-palette.blade.php      | 15 ++++++++++++
 .../views/components/user-dropdown.blade.php  |  6 ++++-
 .../components/view-site-button.blade.php     |  8 +++++++
 .../views/partials/global-header.blade.php    | 23 ++++---------------
 src/CommandPalette/Palette.php                |  8 +++++++
 7 files changed, 42 insertions(+), 34 deletions(-)
 create mode 100644 resources/views/components/command-palette.blade.php
 create mode 100644 resources/views/components/view-site-button.blade.php

diff --git a/resources/js/components/command-palette/CommandPalette.vue b/resources/js/components/command-palette/CommandPalette.vue
index 6a1dd171283..bc3a845118a 100644
--- a/resources/js/components/command-palette/CommandPalette.vue
+++ b/resources/js/components/command-palette/CommandPalette.vue
@@ -274,19 +274,7 @@ const modalClasses = cva({
 <template>
     <DialogRoot v-model:open="open" :modal="true">
         <DialogTrigger>
-            <div class="
-                data-[focus-visible]:outline-focus hover flex cursor-text items-center gap-x-1.5 group h-8
-                rounded-lg [button:has(>&)]:rounded-md bg-black/40 text-xs text-white/60 outline-none
-                border-b border-b-white/20 inset-shadow-sm inset-shadow-black/20
-                md:w-32 md:py-[calc(5/16*1rem)] md:px-2
-                hover:bg-black/45 hover:text-white/70
-            ">
-                <Icon name="magnifying-glass" class="size-5 flex-none text-white/50 group-hover:text-white/70" />
-                <span class="sr-only leading-none md:not-sr-only st-text-trim-cap">{{ __('Search') }}</span>
-                <kbd class="ml-auto hidden self-center rounded bg-white/5 px-[0.3125rem] py-[0.0625rem] text-[0.625rem]/4 font-medium text-white/60 group-hover:text-white/70 ring-1 ring-white/7.5 [word-spacing:-0.15em] ring-inset md:block">
-                    <kbd class="font-sans">⌘ </kbd><kbd class="font-sans">K</kbd>
-                </kbd>
-            </div>
+            <slot />
         </DialogTrigger>
         <DialogPortal>
             <DialogOverlay class="fixed inset-0 z-30 bg-gray-800/20 backdrop-blur-[2px] dark:bg-gray-800/50" />
diff --git a/resources/views/components/avatar.blade.php b/resources/views/components/avatar.blade.php
index 917dae8e748..d62dacccb63 100644
--- a/resources/views/components/avatar.blade.php
+++ b/resources/views/components/avatar.blade.php
@@ -3,5 +3,5 @@
 @if ($user->avatar())
     <img src="{{ $user->avatar() }}" class="size-7 rounded-xl [button:has(&)]:rounded-xl shape-squircle {{ $class ?? '' }}" alt="{{ $user->name() }}" />
 @else
-    <div aria-label="{{ $user->name() }}" class="size-7 text-white text-2xs font-medium flex items-center justify-center rounded-xl [button:has(&)]:rounded-xl bg-gradient-to-tr from-purple-500 to-red-600 shape-squircle {{ $class ?? '' }}">{{ $user->initials() }}</div>
+    <div aria-label="{{ $user->name() }}" class="antialiased size-7 text-white text-2xs font-medium flex items-center justify-center rounded-xl [button:has(&)]:rounded-xl bg-gradient-to-tr from-purple-500 to-red-600 shape-squircle {{ $class ?? '' }}">{{ $user->initials() }}</div>
 @endif
diff --git a/resources/views/components/command-palette.blade.php b/resources/views/components/command-palette.blade.php
new file mode 100644
index 00000000000..c43ea612eaa
--- /dev/null
+++ b/resources/views/components/command-palette.blade.php
@@ -0,0 +1,15 @@
+<command-palette>
+    <div class="
+            data-[focus-visible]:outline-focus hover flex cursor-text items-center gap-x-1.5 group h-8
+            rounded-lg [button:has(>&)]:rounded-md bg-black/40 text-xs text-white/60 outline-none
+            border-b border-b-white/20 inset-shadow-sm inset-shadow-black/20
+            md:w-32 md:py-[calc(5/16*1rem)] md:px-2
+            hover:bg-black/45 hover:text-white/70
+        ">
+        @cp_svg('icons/magnifying-glass', 'size-5 flex-none text-white/50 group-hover:text-white/70')
+        <span class="sr-only leading-none md:not-sr-only st-text-trim-cap">{{ __('Search') }}</span>
+        <kbd class="ml-auto hidden self-center rounded bg-white/5 px-[0.3125rem] py-[0.0625rem] text-[0.625rem]/4 font-medium text-white/60 group-hover:text-white/70 ring-1 ring-white/7.5 [word-spacing:-0.15em] ring-inset md:block">
+            <kbd class="font-sans">⌘ </kbd><kbd class="font-sans">K</kbd>
+        </kbd>
+    </div>
+</command-palette>
diff --git a/resources/views/components/user-dropdown.blade.php b/resources/views/components/user-dropdown.blade.php
index 3e0225eb4e2..427d0e4b179 100644
--- a/resources/views/components/user-dropdown.blade.php
+++ b/resources/views/components/user-dropdown.blade.php
@@ -1,4 +1,8 @@
-<ui-dropdown align="end" x-cloak>
+<div v-if="false" class="inline-flex items-center justify-center h-10 w-10">
+    <x-statamic::avatar :user="$user" />
+</div>
+
+<ui-dropdown align="end" v-cloak>
     <template #trigger>
         <ui-button :icon-only="true" variant="ghost">
             <x-statamic::avatar :user="$user" />
diff --git a/resources/views/components/view-site-button.blade.php b/resources/views/components/view-site-button.blade.php
new file mode 100644
index 00000000000..970bef1d042
--- /dev/null
+++ b/resources/views/components/view-site-button.blade.php
@@ -0,0 +1,8 @@
+<a
+    href="{{ Statamic\Facades\Site::selected()->url() }}"
+    aria-label="{{ __('View Site') }}"
+    class="inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-gray-400 dark:disabled:text-gray-600 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-black [&_svg]:opacity-60 dark:[&_svg]:text-white bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 h-8 text-[0.8125rem] leading-tight rounded-lg px-0 gap-0 w-8 [&_svg]:size-3.5 [&_svg]:size-4 -me-2 [&_svg]:text-white/85! v-popper--has-tooltip"
+    target="_blank"
+>
+    @cp_svg('icons/visit-website')
+</a>
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 956feff154b..bda2809e2d1 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -117,25 +117,10 @@ class="grid grid-cols-[auto_1fr_auto] items-center"
         @if (Statamic\Facades\Site::authorized()->count() > 1)
             <global-site-selector></global-site-selector>
         @endif
-        <div class="flex items-center"><command-palette /></div>
-        <ui-command-palette-item
-            text="{{ __('View Site') }}"
-            icon="visit-website"
-            url="{{ Statamic\Facades\Site::selected()->url() }}"
-            open-new-tab
-            v-slot="{ text, url, icon }"
-        >
-            <ui-button
-                :aria-label="text"
-                :href="url"
-                :icon="icon"
-                class="[&_svg]:size-4 -me-2 [&_svg]:text-white/85!"
-                size="sm"
-                target="_blank"
-                v-tooltip="text"
-                variant="ghost"
-            ></ui-button>
-        </ui-command-palette-item>
+        <div class="flex items-center">
+            <x-statamic::command-palette />
+        </div>
+        <x-statamic::view-site-button />
         <x-statamic::user-dropdown />
     </div>
 </header>
diff --git a/src/CommandPalette/Palette.php b/src/CommandPalette/Palette.php
index 46a4e3be56b..99751cd3cdd 100644
--- a/src/CommandPalette/Palette.php
+++ b/src/CommandPalette/Palette.php
@@ -6,6 +6,7 @@
 use Illuminate\Support\Facades\Cache;
 use Statamic\CP\Navigation\NavItem;
 use Statamic\Facades;
+use Statamic\Facades\Site;
 use Statamic\Facades\User;
 use Statamic\Fields\Fieldset;
 use Statamic\Support\Arr;
@@ -144,6 +145,13 @@ protected function buildMiscellaneous(): self
             openNewTab: true,
         );
 
+        $this->add(
+            text: __('View Site'),
+            icon: 'visit-website',
+            url: Site::selected()->url(),
+            openNewTab: true,
+        );
+
         return $this;
     }
 

From b2666f5707e6add28921ddb0b3d57aba7c30a415 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 17:36:45 +0100
Subject: [PATCH 23/50] Right hand side items in global header with just
 blade/view transitions

---
 resources/views/partials/global-header.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index bda2809e2d1..6aeb66cfab2 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -113,7 +113,7 @@ class="grid grid-cols-[auto_1fr_auto] items-center"
         </div>
     </div>
 
-    <div class="dark flex-1 flex gap-1 md:gap-3 items-center justify-end shrink-0 entry-animate-in entry-animate-in--quick">
+    <div class="dark flex-1 flex gap-1 md:gap-3 items-center justify-end shrink-0">
         @if (Statamic\Facades\Site::authorized()->count() > 1)
             <global-site-selector></global-site-selector>
         @endif

From c3415b25dbc1a03a028141d35bd4011b78763999 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 15 Sep 2025 17:40:57 +0100
Subject: [PATCH 24/50] Revert "Remove skeletons so they doesn't conflict with
 view transitions"

This reverts commit 473dd67ee39731b63c93cf6082855463c76e49d6.
---
 resources/js/components/collections/Listing.vue      |  9 +++++++++
 resources/js/components/entries/CollectionWidget.vue |  7 +++++++
 resources/js/components/forms/FormWidget.vue         |  7 +++++++
 resources/js/components/ui/Listing/Listing.vue       | 12 ++++++++++++
 4 files changed, 35 insertions(+)

diff --git a/resources/js/components/collections/Listing.vue b/resources/js/components/collections/Listing.vue
index 13c4bf83ac7..c4e8839c21c 100644
--- a/resources/js/components/collections/Listing.vue
+++ b/resources/js/components/collections/Listing.vue
@@ -71,6 +71,15 @@
                         :sort-column="collection.sort_column"
                         :sort-direction="collection.sort_direction"
                     >
+                        <template #initializing>
+                            <div class="flex flex-col gap-[9px] justify-between py-1 px-5">
+                                <ui-skeleton class="h-[19px] w-full" />
+                                <ui-skeleton class="h-[19px] w-full" />
+                                <ui-skeleton class="h-[19px] w-full" />
+                                <ui-skeleton class="h-[19px] w-full" />
+                                <ui-skeleton class="h-[19px] w-full" />
+                            </div>
+                        </template>
                         <template #default="{ items }">
                             <table v-if="items.length" class="w-full [&_td]:py-1 [&_td]:px-5 [&_td]:text-sm">
                                 <ui-listing-table-head sr-only />
diff --git a/resources/js/components/entries/CollectionWidget.vue b/resources/js/components/entries/CollectionWidget.vue
index b8830e99a51..ee05c7b1c09 100644
--- a/resources/js/components/entries/CollectionWidget.vue
+++ b/resources/js/components/entries/CollectionWidget.vue
@@ -52,6 +52,13 @@ function formatDate(value) {
         :sort-column="initialSortColumn"
         :sort-direction="initialSortDirection"
     >
+        <template #initializing>
+            <Widget v-bind="widgetProps">
+                <div class="flex flex-col gap-[9px] justify-between py-3 px-4">
+                    <ui-skeleton v-for="i in initialPerPage" class="h-[19px] w-full" />
+                </div>
+            </Widget>
+        </template>
         <template #default="{ items, loading }">
             <Widget v-bind="widgetProps">
                 <ui-description v-if="!items.length" class="flex-1 flex items-center justify-center">
diff --git a/resources/js/components/forms/FormWidget.vue b/resources/js/components/forms/FormWidget.vue
index 2360b9b8bb6..a0e5d747aa2 100644
--- a/resources/js/components/forms/FormWidget.vue
+++ b/resources/js/components/forms/FormWidget.vue
@@ -43,6 +43,13 @@ function formatDate(value) {
         :show-pagination-page-links="false"
         :show-pagination-per-page-selector="false"
     >
+        <template #initializing>
+            <Widget v-bind="widgetProps">
+                <div class="flex flex-col gap-4 justify-between p-4">
+                    <ui-skeleton v-for="i in initialPerPage" class="h-3 w-full" />
+                </div>
+            </Widget>
+        </template>
         <template #default="{ items }">
             <Widget v-bind="widgetProps">
                 <ui-description v-if="!items.length" class="flex-1 flex items-center justify-center">
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 8ff81e8fd3e..73cd5186fcf 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -668,6 +668,18 @@ autoApplyState();
 </script>
 
 <template>
+    <slot name="initializing" v-if="initializing">
+        <div class="flex flex-col gap-4 justify-between mt-2">
+            <ui-skeleton class="h-3 w-48" />
+            <div class="flex gap-3">
+                <ui-skeleton class="h-8 w-80" />
+                <ui-skeleton class="h-8 w-24" />
+                <div class="flex-1" />
+                <ui-skeleton class="size-8" />
+            </div>
+            <ui-skeleton class="h-48 w-full" />
+        </div>
+    </slot>
     <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
         <Presets v-if="showPresets" />
         <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative flex items-center gap-3 min-h-16 entry-animate-in entry-animate-in--siblings">

From 37f52913d0dcfeeb4e51c07025bfaa0cd8bfd0e6 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 15 Sep 2025 14:16:06 -0400
Subject: [PATCH 25/50] fade in skeleton after a short delay

---
 resources/js/components/ui/Listing/Listing.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 73cd5186fcf..1c4578ffc62 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -161,6 +161,11 @@ const hasFilters = computed(() => props.filters && props.filters.length > 0);
 const showPresets = computed(() => props.allowPresets && props.preferencesPrefix);
 const showBulkActions = computed(() => props.allowBulkActions && hasActions.value);
 
+// We only want to show the skeleton after a small delay, to avoid flickering when loading is very fast.
+const shouldShowSkeleton = ref(false);
+setTimeout(() => shouldShowSkeleton.value = initializing.value, 300);
+watch(initializing, () => shouldShowSkeleton.value = false);
+
 const items = computed({
     get() {
         let items = rawItems.value;
@@ -668,8 +673,8 @@ autoApplyState();
 </script>
 
 <template>
-    <slot name="initializing" v-if="initializing">
-        <div class="flex flex-col gap-4 justify-between mt-2">
+    <slot name="initializing" v-if="shouldShowSkeleton">
+        <div class="flex flex-col gap-4 justify-between mt-2 animate-in fade-in duration-[1s]">
             <ui-skeleton class="h-3 w-48" />
             <div class="flex gap-3">
                 <ui-skeleton class="h-8 w-80" />

From c7a2df3147907d0d1813bd99f1010dd505ce56d2 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 15 Sep 2025 14:21:09 -0400
Subject: [PATCH 26/50] extract a composable

---
 resources/js/components/ui/Listing/Listing.vue |  7 ++-----
 resources/js/composables/skeleton-delay.js     | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/composables/skeleton-delay.js

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 1c4578ffc62..e715b6699f5 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -6,6 +6,7 @@ export const [injectListingContext, provideListingContext] = createContext('List
 
 <script setup>
 import { ref, toRef, computed, watch, nextTick, onMounted, onBeforeUnmount, useSlots } from 'vue';
+import useSkeletonDelay from '@/composables/skeleton-delay.js';
 import {
     Icon,
     Panel,
@@ -160,11 +161,7 @@ const hasActions = computed(() => !!props.actionUrl);
 const hasFilters = computed(() => props.filters && props.filters.length > 0);
 const showPresets = computed(() => props.allowPresets && props.preferencesPrefix);
 const showBulkActions = computed(() => props.allowBulkActions && hasActions.value);
-
-// We only want to show the skeleton after a small delay, to avoid flickering when loading is very fast.
-const shouldShowSkeleton = ref(false);
-setTimeout(() => shouldShowSkeleton.value = initializing.value, 300);
-watch(initializing, () => shouldShowSkeleton.value = false);
+const shouldShowSkeleton = useSkeletonDelay(initializing);
 
 const items = computed({
     get() {
diff --git a/resources/js/composables/skeleton-delay.js b/resources/js/composables/skeleton-delay.js
new file mode 100644
index 00000000000..a0c6bf6c98e
--- /dev/null
+++ b/resources/js/composables/skeleton-delay.js
@@ -0,0 +1,16 @@
+import { ref, watch } from 'vue';
+
+export default function useSkeletonDelay(isLoading, delay = 300) {
+    const shouldShowSkeleton = ref(false);
+
+    const timer = setTimeout(() => shouldShowSkeleton.value = isLoading.value, delay);
+
+    watch(isLoading, (loading) => {
+        if (!loading) {
+            clearTimeout(timer);
+            shouldShowSkeleton.value = false;
+        }
+    });
+
+    return shouldShowSkeleton;
+}

From e2fe3cc39aa7ca87253255af64d90af6e655d5c5 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 15 Sep 2025 14:27:39 -0400
Subject: [PATCH 27/50] move breadcrumbs into components

---
 .../components/breadcrumbs/dropdown.blade.php | 47 +++++++++++++++
 .../components/breadcrumbs/index.blade.php    | 11 ++++
 .../views/partials/global-header.blade.php    | 58 +------------------
 3 files changed, 59 insertions(+), 57 deletions(-)
 create mode 100644 resources/views/components/breadcrumbs/dropdown.blade.php
 create mode 100644 resources/views/components/breadcrumbs/index.blade.php

diff --git a/resources/views/components/breadcrumbs/dropdown.blade.php b/resources/views/components/breadcrumbs/dropdown.blade.php
new file mode 100644
index 00000000000..65d004da32c
--- /dev/null
+++ b/resources/views/components/breadcrumbs/dropdown.blade.php
@@ -0,0 +1,47 @@
+<ui-dropdown class="relative" aria-label="{{ __('More options for') }} {{ __($breadcrumb->text()) }}">
+    <template #trigger>
+        <ui-button
+            variant="ghost"
+            icon="chevron-vertical"
+            class="[&_svg]:size-3! h-8! w-4! hover:bg-gray-300/5! -ml-3 mr-1"
+            :aria-label="'{{ __('Options for') }} {{ __($breadcrumb->text()) }}'"
+            aria-haspopup="true"
+            aria-expanded="false"
+        ></ui-button>
+    </template>
+    <ui-dropdown-header
+        class="grid grid-cols-[auto_1fr_auto] items-center"
+        icon="{{ $breadcrumb->icon() }}"
+        @if($breadcrumb->hasConfigureUrl())
+            append-icon="cog-solid"
+        append-href="{{ $breadcrumb->configureUrl() }}"
+        @endif
+        role="menuitem"
+    >
+        <a href="{{ $breadcrumb->url() }}" aria-label="{{ __('Navigate to') }} {{ __($breadcrumb->text()) }}">
+            {{ __($breadcrumb->text()) }}
+        </a>
+    </ui-dropdown-header>
+    @if($breadcrumb->hasLinks())
+        <ui-dropdown-menu role="menu">
+            @foreach($breadcrumb->links() as $link)
+                <ui-dropdown-item
+                    text="{{ __($link->text) }}"
+                    icon="{{ $link->icon }}"
+                    href="{{ $link->url }}"
+                    role="menuitem"
+                    :aria-label="'{{ __($link->text) }} - {{ __('Navigate to') }}'"
+                ></ui-dropdown-item>
+            @endforeach
+        </ui-dropdown-menu>
+    @endif
+    @if($breadcrumb->createUrl())
+        <ui-dropdown-footer
+            icon="plus"
+            text="{{ __($breadcrumb->createLabel()) }}"
+            href="{{ $breadcrumb->createUrl() }}"
+            role="menuitem"
+            :aria-label="'{{ __($breadcrumb->createLabel()) }} - {{ __('Create new') }}'"
+        ></ui-dropdown-footer>
+    @endif
+</ui-dropdown>
diff --git a/resources/views/components/breadcrumbs/index.blade.php b/resources/views/components/breadcrumbs/index.blade.php
new file mode 100644
index 00000000000..57040c67c81
--- /dev/null
+++ b/resources/views/components/breadcrumbs/index.blade.php
@@ -0,0 +1,11 @@
+<div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs v-cloak>
+    @foreach($breadcrumbs as $breadcrumb)
+        <div class="items-center gap-2 md:flex entry-animate-in entry-animate-in--quick">
+            <span class="text-white/30">/</span>
+            <ui-button href="{{ $breadcrumb->url() }}" text="{{ __($breadcrumb->text()) }}" size="sm" variant="ghost" class="dark:text-white/85! hover:text-white! px-2! mr-1.75"></ui-button>
+            @if($breadcrumb->hasLinks() || $breadcrumb->createUrl())
+                <x-statamic::breadcrumbs.dropdown :$breadcrumb />
+            @endif
+        </div>
+    @endforeach
+</div>
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 6aeb66cfab2..ba69e861ee7 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -54,63 +54,7 @@
         </div>
         @endif
 
-        <div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs v-cloak>
-            @foreach($breadcrumbs as $breadcrumb)
-                <div class="items-center gap-2 md:flex entry-animate-in entry-animate-in--quick">
-                <span class="text-white/30">/</span>
-                <ui-button href="{{ $breadcrumb->url() }}" text="{{ __($breadcrumb->text()) }}" size="sm" variant="ghost" class="dark:text-white/85! hover:text-white! px-2! mr-1.75"></ui-button>
-                @if($breadcrumb->hasLinks() || $breadcrumb->createUrl())
-                    <ui-dropdown class="relative" aria-label="{{ __('More options for') }} {{ __($breadcrumb->text()) }}">
-                        <template #trigger>
-                            <ui-button
-                                variant="ghost"
-                                icon="chevron-vertical"
-                                class="[&_svg]:size-3! h-8! w-4! hover:bg-gray-300/5! -ml-3 mr-1"
-                                :aria-label="'{{ __('Options for') }} {{ __($breadcrumb->text()) }}'"
-                                aria-haspopup="true"
-                                aria-expanded="false"
-                            ></ui-button>
-                        </template>
-                        <ui-dropdown-header
-                            class="grid grid-cols-[auto_1fr_auto] items-center"
-                            icon="{{ $breadcrumb->icon() }}"
-                            @if($breadcrumb->hasConfigureUrl())
-                                append-icon="cog-solid"
-                                append-href="{{ $breadcrumb->configureUrl() }}"
-                            @endif
-                            role="menuitem"
-                        >
-                            <a href="{{ $breadcrumb->url() }}" aria-label="{{ __('Navigate to') }} {{ __($breadcrumb->text()) }}">
-                                {{ __($breadcrumb->text()) }}
-                            </a>
-                        </ui-dropdown-header>
-                        @if($breadcrumb->hasLinks())
-                            <ui-dropdown-menu role="menu">
-                                @foreach($breadcrumb->links() as $link)
-                                    <ui-dropdown-item
-                                        text="{{ __($link->text) }}"
-                                        icon="{{ $link->icon }}"
-                                        href="{{ $link->url }}"
-                                        role="menuitem"
-                                        :aria-label="'{{ __($link->text) }} - {{ __('Navigate to') }}'"
-                                    ></ui-dropdown-item>
-                                @endforeach
-                            </ui-dropdown-menu>
-                        @endif
-                        @if($breadcrumb->createUrl())
-                            <ui-dropdown-footer
-                                icon="plus"
-                                text="{{ __($breadcrumb->createLabel()) }}"
-                                href="{{ $breadcrumb->createUrl() }}"
-                                role="menuitem"
-                                :aria-label="'{{ __($breadcrumb->createLabel()) }} - {{ __('Create new') }}'"
-                            ></ui-button>
-                        @endif
-                    </ui-dropdown>
-                    </div>
-                @endif
-            @endforeach
-        </div>
+        <x-statamic::breadcrumbs :$breadcrumbs />
     </div>
 
     <div class="dark flex-1 flex gap-1 md:gap-3 items-center justify-end shrink-0">

From 450006c868cff7b532a0a4a55ad1f9393297056b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 15 Sep 2025 14:59:22 -0400
Subject: [PATCH 28/50] Buttons in blade to prevent pop-in

---
 .../components/breadcrumbs/dropdown.blade.php | 20 ++++++++++++++++++-
 .../components/breadcrumbs/index.blade.php    | 17 ++++++++++++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/resources/views/components/breadcrumbs/dropdown.blade.php b/resources/views/components/breadcrumbs/dropdown.blade.php
index 65d004da32c..352b2a96003 100644
--- a/resources/views/components/breadcrumbs/dropdown.blade.php
+++ b/resources/views/components/breadcrumbs/dropdown.blade.php
@@ -1,4 +1,22 @@
-<ui-dropdown class="relative" aria-label="{{ __('More options for') }} {{ __($breadcrumb->text()) }}">
+{{-- Hardcoded duplicate of the dropdown trigger in blade to prevent Vue pop in --}}
+<button
+    v-if="false"
+    class="
+        inline-flex items-center justify-center whitespace-nowrap shrink-0
+        font-medium antialiased cursor-pointer no-underline
+        disabled:text-gray-400 dark:disabled:text-gray-600 disabled:cursor-not-allowed
+        [&_svg]:shrink-0 [&_svg]:text-black [&_svg]:opacity-60 dark:[&_svg]:text-white
+        bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200
+        h-10 text-sm rounded-lg px-0 gap-0 w-10
+        [&_svg]:size-4.5 [&_svg]:size-3! h-8! w-4! hover:bg-gray-300/5! -ml-3 mr-1
+    "
+    type="button"
+    data-ui-dropdown-trigger
+>
+    @cp_svg('icons/chevron-vertical')
+</button>
+
+<ui-dropdown v-cloak class="relative" aria-label="{{ __('More options for') }} {{ __($breadcrumb->text()) }}">
     <template #trigger>
         <ui-button
             variant="ghost"
diff --git a/resources/views/components/breadcrumbs/index.blade.php b/resources/views/components/breadcrumbs/index.blade.php
index 57040c67c81..ee515d74518 100644
--- a/resources/views/components/breadcrumbs/index.blade.php
+++ b/resources/views/components/breadcrumbs/index.blade.php
@@ -1,8 +1,21 @@
-<div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs v-cloak>
+<div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs>
     @foreach($breadcrumbs as $breadcrumb)
         <div class="items-center gap-2 md:flex entry-animate-in entry-animate-in--quick">
             <span class="text-white/30">/</span>
-            <ui-button href="{{ $breadcrumb->url() }}" text="{{ __($breadcrumb->text()) }}" size="sm" variant="ghost" class="dark:text-white/85! hover:text-white! px-2! mr-1.75"></ui-button>
+            <a
+                class="
+                    inline-flex items-center justify-center whitespace-nowrap shrink-0
+                    font-medium antialiased cursor-pointer no-underline
+                    disabled:text-gray-400 dark:disabled:text-gray-600 disabled:cursor-not-allowed
+                    bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 px-3 h-8
+                    text-[0.8125rem] leading-tight gap-2 rounded-lg
+                    dark:text-white/85! hover:text-white! px-2! mr-1.75
+                "
+                href="{{ $breadcrumb->url() }}"
+            >
+                {{ __($breadcrumb->text()) }}
+            </a>
+
             @if($breadcrumb->hasLinks() || $breadcrumb->createUrl())
                 <x-statamic::breadcrumbs.dropdown :$breadcrumb />
             @endif

From 594420d882b1ce053095fcabe11a257b2a482616 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 15 Sep 2025 15:03:02 -0400
Subject: [PATCH 29/50] prevent breadcrumb blink

---
 resources/views/components/breadcrumbs/index.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/components/breadcrumbs/index.blade.php b/resources/views/components/breadcrumbs/index.blade.php
index ee515d74518..51bbf0964d2 100644
--- a/resources/views/components/breadcrumbs/index.blade.php
+++ b/resources/views/components/breadcrumbs/index.blade.php
@@ -1,6 +1,6 @@
 <div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs>
     @foreach($breadcrumbs as $breadcrumb)
-        <div class="items-center gap-2 md:flex entry-animate-in entry-animate-in--quick">
+        <div class="items-center gap-2 md:flex">
             <span class="text-white/30">/</span>
             <a
                 class="

From 772b5236ebd970549b1cebaeac7a2636c037e94b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 15 Sep 2025 15:04:41 -0400
Subject: [PATCH 30/50] Move pro badge to component

---
 .../components/pro-badge/index.blade.php      | 20 ++++++++++++++++++
 .../views/partials/global-header.blade.php    | 21 +------------------
 2 files changed, 21 insertions(+), 20 deletions(-)
 create mode 100644 resources/views/components/pro-badge/index.blade.php

diff --git a/resources/views/components/pro-badge/index.blade.php b/resources/views/components/pro-badge/index.blade.php
new file mode 100644
index 00000000000..fe301e3fbc2
--- /dev/null
+++ b/resources/views/components/pro-badge/index.blade.php
@@ -0,0 +1,20 @@
+@inject('licenses', 'Statamic\Licensing\LicenseManager')
+
+@if ($licenses->valid())
+    <ui-badge size="sm" variant="flat" text="{{ __('Pro') }}" class="hidden sm:block select-none bg-white/15!" />
+@else
+    <ui-tooltip :text="{{ $licenses->requestFailed() ? "'".$licenses->requestFailureMessage()."'" : 'null' }}">
+        <ui-badge
+            @if ($licenses->requestFailed())
+                color="yellow"
+                icon="alert-warning-exclamation-mark"
+            @elseif ($licenses->isOnPublicDomain())
+                color="red"
+            @else
+                color="green"
+            @endif
+            href="{{ cp_route('utilities.licensing') }}"
+            text="{{ __('Pro') }} – {{ $licenses->isOnPublicDomain() ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}"
+        ></ui-badge>
+    </ui-tooltip>
+@endif
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index ba69e861ee7..38b46c5d557 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -2,8 +2,6 @@
     use function Statamic\trans as __;
 @endphp
 
-@inject('licenses', 'Statamic\Licensing\LicenseManager')
-
 <header style="view-transition-name: header" class="h-14 bg-global-header-bg dark:bg-dark-global-header-bg flex justify-between space-x-2 items-center text-white px-4 fixed overflow-x-auto top-0 inset-x-0 z-[3]">
     <a class="c-skip-link z-(--z-index-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main">
         {{ __('Skip to sidebar') }}
@@ -32,24 +30,7 @@
                 {{ $customLogoText ?? config('app.name') }}
             </a>
             @if (Statamic::pro())
-                @if ($licenses->valid())
-                    <ui-badge size="sm" variant="flat" text="{{ __('Pro') }}" class="hidden sm:block select-none bg-white/15!" />
-                @else
-                    <ui-tooltip :text="{{ $licenses->requestFailed() ? "'".$licenses->requestFailureMessage()."'" : 'null' }}">
-                        <ui-badge
-                            @if ($licenses->requestFailed())
-                                color="yellow"
-                                icon="alert-warning-exclamation-mark"
-                            @elseif ($licenses->isOnPublicDomain())
-                                color="red"
-                            @else
-                                color="green"
-                            @endif
-                            href="{{ cp_route('utilities.licensing') }}"
-                            text="{{ __('Pro') }} – {{ $licenses->isOnPublicDomain() ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}"
-                        ></ui-badge>
-                    </ui-tooltip>
-                @endif
+                <x-statamic::pro-badge />
             @endif
         </div>
         @endif

From 8b400f3926bc35f513f153d418f9ed279bf4fc0f Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 15 Sep 2025 15:32:07 -0400
Subject: [PATCH 31/50] prevent pop in on the pro badge

---
 .../components/pro-badge/index.blade.php      | 53 +++++++++++++------
 .../pro-badge/problematic.blade.php           | 13 +++++
 2 files changed, 51 insertions(+), 15 deletions(-)
 create mode 100644 resources/views/components/pro-badge/problematic.blade.php

diff --git a/resources/views/components/pro-badge/index.blade.php b/resources/views/components/pro-badge/index.blade.php
index fe301e3fbc2..fcea9660256 100644
--- a/resources/views/components/pro-badge/index.blade.php
+++ b/resources/views/components/pro-badge/index.blade.php
@@ -1,20 +1,43 @@
 @inject('licenses', 'Statamic\Licensing\LicenseManager')
 
-@if ($licenses->valid())
-    <ui-badge size="sm" variant="flat" text="{{ __('Pro') }}" class="hidden sm:block select-none bg-white/15!" />
+@php
+$requestFailed = $licenses->requestFailed();
+$requestFailed = true;
+$onPublicDomain = $licenses->isOnPublicDomain();
+$onPublicDomain = true;
+
+$base = 'relative inline-flex items-center justify-center gap-1 font-normal antialiased whitespace-nowrap no-underline not-prose [button]:cursor-pointer group [&_svg]:opacity-60 [&_svg]:group-hover:opacity-80 dark:[&_svg]:group-hover:opacity-70';
+$sizeDefault = 'text-xs leading-5.5 px-2 rounded-sm [&_svg]:size-3.5 gap-2';
+$sizeSm = 'text-2xs leading-normal px-1.25 rounded-[0.1875rem] [&_svg]:size-2.5';
+$flat = 'border-0 shadow-none!';
+$yellow = 'bg-yellow-100 border-yellow-400 text-yellow-700 dark:bg-yellow-300/6 dark:text-yellow-300 [a]:hover:bg-yellow-200/80 [button]:hover:bg-yellow-200/80 dark:[a]:hover:bg-yellow-300/15';
+$red = 'bg-red-100/80 border-red-400/80 text-red-700 dark:bg-red-300/6 dark:text-red-300 [a]:hover:bg-red-200/60 [button]:hover:bg-red-200/60 dark:[a]:hover:bg-red-300/15';
+$green = 'bg-green-100/80 border-green-400 text-green-700 dark:bg-green-300/6 dark:text-green-300 [a]:hover:bg-green-200/60 [button]:hover:bg-green-200/60 dark:[a]:hover:bg-green-300/15';
+@endphp
+
+@if (!$licenses->valid())
+    <div class="{{ $base }} {{ $flat }} {{ $sizeSm }} bg-white/15!">
+        {{ __('Pro') }}
+    </div>
 @else
-    <ui-tooltip :text="{{ $licenses->requestFailed() ? "'".$licenses->requestFailureMessage()."'" : 'null' }}">
-        <ui-badge
-            @if ($licenses->requestFailed())
-                color="yellow"
-                icon="alert-warning-exclamation-mark"
-            @elseif ($licenses->isOnPublicDomain())
-                color="red"
-            @else
-                color="green"
-            @endif
-            href="{{ cp_route('utilities.licensing') }}"
-            text="{{ __('Pro') }} – {{ $licenses->isOnPublicDomain() ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}"
-        ></ui-badge>
+
+    {{--
+        Rendered twice:
+        - Once without being wrapped in a tooltip to prevent vue pop-in.
+        - Again surrounded by the tooltip so we can... have the tooltip.
+    --}}
+    <div v-if="false">
+        <x-statamic::pro-badge.problematic
+            :$requestFailed :$onPublicDomain
+            :$base :$sizeDefault :$flat :$yellow :$red :$green
+        />
+    </div>
+
+    <ui-tooltip v-cloak :text="{{ $requestFailed ? "'".$licenses->requestFailureMessage()."'" : 'null' }}">
+        <x-statamic::pro-badge.problematic
+            :$requestFailed :$onPublicDomain
+            :$base :$sizeDefault :$flat :$yellow :$red :$green
+        />
     </ui-tooltip>
+
 @endif
diff --git a/resources/views/components/pro-badge/problematic.blade.php b/resources/views/components/pro-badge/problematic.blade.php
new file mode 100644
index 00000000000..12fb222e480
--- /dev/null
+++ b/resources/views/components/pro-badge/problematic.blade.php
@@ -0,0 +1,13 @@
+<a href="{{ cp_route('utilities.licensing') }}" class="
+    {{ $base }} {{ $sizeDefault }} {{ $flat }}
+
+    @if ($requestFailed)
+        {{ $yellow }}
+    @elseif ($onPublicDomain)
+        {{ $red }}
+    @else
+        {{ $green }}
+    @endif
+">
+    {{ __('Pro') }} – {{ $onPublicDomain ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}
+</a>

From 13240b7ea6817e00d8dfd9f0bdde328d863717a6 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Mon, 15 Sep 2025 15:33:33 -0400
Subject: [PATCH 32/50] oops. fix bits i had in for testing

---
 resources/views/components/pro-badge/index.blade.php | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/views/components/pro-badge/index.blade.php b/resources/views/components/pro-badge/index.blade.php
index fcea9660256..cef976b90a2 100644
--- a/resources/views/components/pro-badge/index.blade.php
+++ b/resources/views/components/pro-badge/index.blade.php
@@ -2,9 +2,7 @@
 
 @php
 $requestFailed = $licenses->requestFailed();
-$requestFailed = true;
 $onPublicDomain = $licenses->isOnPublicDomain();
-$onPublicDomain = true;
 
 $base = 'relative inline-flex items-center justify-center gap-1 font-normal antialiased whitespace-nowrap no-underline not-prose [button]:cursor-pointer group [&_svg]:opacity-60 [&_svg]:group-hover:opacity-80 dark:[&_svg]:group-hover:opacity-70';
 $sizeDefault = 'text-xs leading-5.5 px-2 rounded-sm [&_svg]:size-3.5 gap-2';
@@ -15,7 +13,7 @@
 $green = 'bg-green-100/80 border-green-400 text-green-700 dark:bg-green-300/6 dark:text-green-300 [a]:hover:bg-green-200/60 [button]:hover:bg-green-200/60 dark:[a]:hover:bg-green-300/15';
 @endphp
 
-@if (!$licenses->valid())
+@if ($licenses->valid())
     <div class="{{ $base }} {{ $flat }} {{ $sizeSm }} bg-white/15!">
         {{ __('Pro') }}
     </div>

From 762392d8125b415941fa9c6da06bf16b1573db74 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 13:22:11 +0100
Subject: [PATCH 33/50] Skeleton placement fixes / dashboard widgets

---
 resources/js/components/collections/Listing.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/collections/Listing.vue b/resources/js/components/collections/Listing.vue
index c4e8839c21c..3dfe9d0f6c5 100644
--- a/resources/js/components/collections/Listing.vue
+++ b/resources/js/components/collections/Listing.vue
@@ -72,12 +72,12 @@
                         :sort-direction="collection.sort_direction"
                     >
                         <template #initializing>
-                            <div class="flex flex-col gap-[9px] justify-between py-1 px-5">
-                                <ui-skeleton class="h-[19px] w-full" />
-                                <ui-skeleton class="h-[19px] w-full" />
-                                <ui-skeleton class="h-[19px] w-full" />
-                                <ui-skeleton class="h-[19px] w-full" />
-                                <ui-skeleton class="h-[19px] w-full" />
+                            <div class="flex flex-col gap-[8px] justify-between py-1 px-5">
+                                <ui-skeleton class="h-[18px] w-full" />
+                                <ui-skeleton class="h-[18px] w-full" />
+                                <ui-skeleton class="h-[18px] w-full" />
+                                <ui-skeleton class="h-[18px] w-full" />
+                                <ui-skeleton class="h-[18px] w-full" />
                             </div>
                         </template>
                         <template #default="{ items }">

From 183c920c6b9344e937bb77a7ffbe658e414055dd Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 13:22:44 +0100
Subject: [PATCH 34/50] Use the same entry transitions for the skeleton ui for
 consistency

---
 resources/js/components/ui/Listing/Listing.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index e715b6699f5..d486ce66929 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -671,7 +671,7 @@ autoApplyState();
 
 <template>
     <slot name="initializing" v-if="shouldShowSkeleton">
-        <div class="flex flex-col gap-4 justify-between mt-2 animate-in fade-in duration-[1s]">
+        <div class="flex flex-col gap-4 justify-between mt-2 entry-animate-in entry-animate-in--slow">
             <ui-skeleton class="h-3 w-48" />
             <div class="flex gap-3">
                 <ui-skeleton class="h-8 w-80" />

From b763495e107d99d3c07d48accd0c0fa031401f6f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 13:23:38 +0100
Subject: [PATCH 35/50] Use the same entry transitions for the skeleton ui for
 consistency

---
 resources/css/core/animation.css      | 4 ++++
 resources/js/components/ui/Widget.vue | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index 42c333092a3..86512697784 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -91,6 +91,10 @@
         transition: opacity 0.1s;
     }
 
+    .entry-animate-in--slow {
+        transition: opacity 1s;
+    }
+
     .entry-animate-in--siblings,
     /* Assume that when we're animating children we want a sibling delay */
     .entry-animate-in-children > *,
diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index cb23ea726a4..b3e640d60b9 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -9,7 +9,7 @@ defineProps({
 
 <template>
     <Card inset class="@container/widget min-h-54 entry-animate-in" v-cloak>
-        <div class="flex h-full min-h-54 flex-col">
+        <div class="flex h-full min-h-54 flex-col entry-animate-in">
             <header class="flex items-center min-h-[49px] justify-between border-b border-gray-200 px-4.5 py-2 dark:border-gray-700">
                 <div class="flex items-center gap-3">
                     <Icon :name="icon" class="hidden! size-5 text-gray-500 @xs/widget:block!" />

From 4fa38e53dd88fe75a97c3746645bcffbbc5128a2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 13:40:13 +0100
Subject: [PATCH 36/50] Skeleton placement fixes / Listing

---
 resources/js/components/ui/Listing/Listing.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index d486ce66929..56e54141135 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -671,13 +671,13 @@ autoApplyState();
 
 <template>
     <slot name="initializing" v-if="shouldShowSkeleton">
-        <div class="flex flex-col gap-4 justify-between mt-2 entry-animate-in entry-animate-in--slow">
-            <ui-skeleton class="h-3 w-48" />
+        <div class="flex flex-col gap-4 justify-between mt-3 entry-animate-in entry-animate-in--slow">
+            <ui-skeleton class="h-5 w-48" />
             <div class="flex gap-3">
-                <ui-skeleton class="h-8 w-80" />
-                <ui-skeleton class="h-8 w-24" />
+                <ui-skeleton class="h-9 w-96" />
+                <ui-skeleton class="h-9 w-24" />
                 <div class="flex-1" />
-                <ui-skeleton class="size-8" />
+                <ui-skeleton class="size-10" />
             </div>
             <ui-skeleton class="h-48 w-full" />
         </div>

From e1cd9c58f7a0f0f64012b89439a1eb1f41ce01b7 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Tue, 16 Sep 2025 10:36:01 -0400
Subject: [PATCH 37/50] Add static global site selector to prevent pop-in

---
 .../components/global-site-selector.blade.php | 26 +++++++++++++++++++
 .../views/partials/global-header.blade.php    |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 resources/views/components/global-site-selector.blade.php

diff --git a/resources/views/components/global-site-selector.blade.php b/resources/views/components/global-site-selector.blade.php
new file mode 100644
index 00000000000..dafd3f883bd
--- /dev/null
+++ b/resources/views/components/global-site-selector.blade.php
@@ -0,0 +1,26 @@
+<global-site-selector></global-site-selector>
+
+<div
+    class="
+        antialiased bg-transparent border-none cursor-pointer
+        dark:hover:bg-white/15 dark:hover:text-gray-200 dark:text-gray-300
+        flex focus-within:focus-outline h-8 hover:bg-gray-400/10
+        items-center justify-between px-3 rounded-lg text-[0.8125rem] text-gray-900
+    "
+    data-ui-combobox-trigger
+    v-if="false"
+>
+    <div class="flex-1 min-w-0">
+        <button
+            type="button"
+            class="w-full text-start bg-transparent truncate flex items-center gap-2 cursor-pointer focus:outline-none"
+            data-ui-combobox-selected-option
+        >
+            @cp_svg('icons/globe-arrow', 'size-4 shrink-0 text-white/85 dark:text-white dark:opacity-50 text-white/85 dark:text-white dark:opacity-50')
+            <span>{{ Statamic\Facades\Site::selected()->name() }}</span>
+        </button>
+    </div>
+    <div class="flex gap-1.5 items-center shrink-0 ms-1.5">
+        @cp_svg('icons/chevron-down', 'size-4 shrink-0 text-gray-400 dark:text-white/40 text-gray-400 dark:text-white/40')
+    </div>
+</div>
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 38b46c5d557..611925437b6 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -40,7 +40,7 @@
 
     <div class="dark flex-1 flex gap-1 md:gap-3 items-center justify-end shrink-0">
         @if (Statamic\Facades\Site::authorized()->count() > 1)
-            <global-site-selector></global-site-selector>
+            <x-statamic::global-site-selector />
         @endif
         <div class="flex items-center">
             <x-statamic::command-palette />

From 350d434e7f1aa4fadcae81b39e76ddfef69e924d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 16:04:38 +0100
Subject: [PATCH 38/50] Skeleton placement fixes / Form Widget -- get this
 exactly correct based on the height of every entry

---
 resources/js/components/forms/FormWidget.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/resources/js/components/forms/FormWidget.vue b/resources/js/components/forms/FormWidget.vue
index a0e5d747aa2..ed6f3f70a28 100644
--- a/resources/js/components/forms/FormWidget.vue
+++ b/resources/js/components/forms/FormWidget.vue
@@ -51,6 +51,11 @@ function formatDate(value) {
             </Widget>
         </template>
         <template #default="{ items }">
+            <Widget v-bind="widgetProps">
+                <div class="flex flex-col justify-between px-4 py-3">
+                    <ui-skeleton v-for="i in initialPerPage" class="h-[1.25rem] mb-[0.25rem] w-full" />
+                </div>
+            </Widget>
             <Widget v-bind="widgetProps">
                 <ui-description v-if="!items.length" class="flex-1 flex items-center justify-center">
                     {{ __('This form is awaiting responses') }}

From 4187b12b1daa4c7de703f86b0e86169240f23558 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 16:05:22 +0100
Subject: [PATCH 39/50] Whoops, put in in the right place

---
 resources/js/components/forms/FormWidget.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/forms/FormWidget.vue b/resources/js/components/forms/FormWidget.vue
index ed6f3f70a28..9e514049e87 100644
--- a/resources/js/components/forms/FormWidget.vue
+++ b/resources/js/components/forms/FormWidget.vue
@@ -44,18 +44,13 @@ function formatDate(value) {
         :show-pagination-per-page-selector="false"
     >
         <template #initializing>
-            <Widget v-bind="widgetProps">
-                <div class="flex flex-col gap-4 justify-between p-4">
-                    <ui-skeleton v-for="i in initialPerPage" class="h-3 w-full" />
-                </div>
-            </Widget>
-        </template>
-        <template #default="{ items }">
             <Widget v-bind="widgetProps">
                 <div class="flex flex-col justify-between px-4 py-3">
                     <ui-skeleton v-for="i in initialPerPage" class="h-[1.25rem] mb-[0.25rem] w-full" />
                 </div>
             </Widget>
+        </template>
+        <template #default="{ items }">
             <Widget v-bind="widgetProps">
                 <ui-description v-if="!items.length" class="flex-1 flex items-center justify-center">
                     {{ __('This form is awaiting responses') }}

From eb6aed22437682eff0b6c4b93157bb9a40c1125c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 16:19:23 +0100
Subject: [PATCH 40/50] Skeleton placement fixes / Collection Widget -- get
 this exactly correct based on the height of every entry

---
 resources/js/components/entries/CollectionWidget.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/entries/CollectionWidget.vue b/resources/js/components/entries/CollectionWidget.vue
index ee05c7b1c09..7b88eeea5fb 100644
--- a/resources/js/components/entries/CollectionWidget.vue
+++ b/resources/js/components/entries/CollectionWidget.vue
@@ -54,8 +54,8 @@ function formatDate(value) {
     >
         <template #initializing>
             <Widget v-bind="widgetProps">
-                <div class="flex flex-col gap-[9px] justify-between py-3 px-4">
-                    <ui-skeleton v-for="i in initialPerPage" class="h-[19px] w-full" />
+                <div class="flex flex-col justify-between px-4 py-3">
+                    <ui-skeleton v-for="i in initialPerPage" class="h-[1.25rem] mb-[0.375rem] w-full" />
                 </div>
             </Widget>
         </template>

From 89e7a6c838461131eae824452c4a6fc65694757f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 16:54:04 +0100
Subject: [PATCH 41/50] View transitions -- prevent langauge combobox arrow
 from collapsing in the header when browser caching is on

---
 packages/ui/src/Combobox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/Combobox.vue b/packages/ui/src/Combobox.vue
index b7a3612aa91..6d1739383f6 100644
--- a/packages/ui/src/Combobox.vue
+++ b/packages/ui/src/Combobox.vue
@@ -315,7 +315,7 @@ defineExpose({
                             </button>
                         </div>
 
-                        <div class="flex gap-1.5 items-center shrink-0 ms-1.5">
+                        <div class="flex gap-1.5 items-center shrink-0 ms-1.5 size-4">
                             <Button v-if="clearable && modelValue" icon="x" variant="ghost" size="xs" round @click="clear" data-ui-combobox-clear-button />
                             <Icon v-if="options.length || ignoreFilter" name="chevron-down" class="text-gray-400 dark:text-white/40" data-ui-combobox-chevron />
                         </div>

From 945a0e1a63f0e57b568ce936416c400e923d5dee Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 17:38:12 +0100
Subject: [PATCH 42/50] Undo because it's not necessary in the end - View
 transitions -- prevent langauge combobox arrow from collapsing in the header
 when browser caching is on

---
 packages/ui/src/Combobox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/Combobox.vue b/packages/ui/src/Combobox.vue
index 6d1739383f6..b7a3612aa91 100644
--- a/packages/ui/src/Combobox.vue
+++ b/packages/ui/src/Combobox.vue
@@ -315,7 +315,7 @@ defineExpose({
                             </button>
                         </div>
 
-                        <div class="flex gap-1.5 items-center shrink-0 ms-1.5 size-4">
+                        <div class="flex gap-1.5 items-center shrink-0 ms-1.5">
                             <Button v-if="clearable && modelValue" icon="x" variant="ghost" size="xs" round @click="clear" data-ui-combobox-clear-button />
                             <Icon v-if="options.length || ignoreFilter" name="chevron-down" class="text-gray-400 dark:text-white/40" data-ui-combobox-chevron />
                         </div>

From 5723a0c6c9fca304d37c7786237a19391d1bbcb2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 17:43:04 +0100
Subject: [PATCH 43/50] Remove code causing header to flicker

---
 resources/views/partials/global-header.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 611925437b6..41aed0bbf27 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -2,7 +2,7 @@
     use function Statamic\trans as __;
 @endphp
 
-<header style="view-transition-name: header" class="h-14 bg-global-header-bg dark:bg-dark-global-header-bg flex justify-between space-x-2 items-center text-white px-4 fixed overflow-x-auto top-0 inset-x-0 z-[3]">
+<header class="h-14 bg-global-header-bg dark:bg-dark-global-header-bg flex justify-between space-x-2 items-center text-white px-4 fixed overflow-x-auto top-0 inset-x-0 z-[3]">
     <a class="c-skip-link z-(--z-index-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main">
         {{ __('Skip to sidebar') }}
     </a>

From 769529d3f72e0f7ea7603e05c63c87f58d4bb702 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 19:07:30 +0100
Subject: [PATCH 44/50] Remove view transitions because of render-blocking
 behaviour

---
 packages/ui/src/Combobox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/Combobox.vue b/packages/ui/src/Combobox.vue
index b7a3612aa91..6d1739383f6 100644
--- a/packages/ui/src/Combobox.vue
+++ b/packages/ui/src/Combobox.vue
@@ -315,7 +315,7 @@ defineExpose({
                             </button>
                         </div>
 
-                        <div class="flex gap-1.5 items-center shrink-0 ms-1.5">
+                        <div class="flex gap-1.5 items-center shrink-0 ms-1.5 size-4">
                             <Button v-if="clearable && modelValue" icon="x" variant="ghost" size="xs" round @click="clear" data-ui-combobox-clear-button />
                             <Icon v-if="options.length || ignoreFilter" name="chevron-down" class="text-gray-400 dark:text-white/40" data-ui-combobox-chevron />
                         </div>

From d9474623d91b319a5de46e94c3e3f4d2a763376c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 16 Sep 2025 19:07:43 +0100
Subject: [PATCH 45/50] Remove view transitions because of render-blocking
 behaviour

---
 resources/css/core/animation.css        | 10 ----------
 resources/views/partials/head.blade.php |  2 --
 2 files changed, 12 deletions(-)

diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index 86512697784..bcbbd8c5347 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -62,21 +62,11 @@
 
     What does it do?
     ----------------
-    - View transitions are effectively used to fade the page _out_
     - Soft-animates an element on page load using @starting-style
     - These should be almost-instant otherwise they'll get annoying
 
 */
 @media (prefers-reduced-motion: no-preference) {
-    @view-transition {
-        navigation: auto;
-    }
-
-    ::view-transition-group(root) {
-        /* Speed up the view transition. Bear in mind 0.25 is the default - https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-old */
-        animation-duration: 0.1s;
-    }
-
     .entry-animate-in,
     .entry-animate-in-children > *,
     .publish-fields > *,
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
index 36326cd396d..a6872e0b429 100644
--- a/resources/views/partials/head.blade.php
+++ b/resources/views/partials/head.blade.php
@@ -57,6 +57,4 @@
 }
 </style>
 
-<link rel="expect" href="#main-content" blocking="render" />
-
 @stack('head')

From 762a432d8d213ef086ba5fb10711ebcd1aa47e8a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 17 Sep 2025 11:01:38 +0100
Subject: [PATCH 46/50] Smoothly blend the Blade > Vue replacement of the
 dropdowns on page load

---
 resources/views/components/breadcrumbs/dropdown.blade.php | 4 ++--
 resources/views/components/breadcrumbs/index.blade.php    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/views/components/breadcrumbs/dropdown.blade.php b/resources/views/components/breadcrumbs/dropdown.blade.php
index 352b2a96003..2dc6a575060 100644
--- a/resources/views/components/breadcrumbs/dropdown.blade.php
+++ b/resources/views/components/breadcrumbs/dropdown.blade.php
@@ -1,6 +1,6 @@
 {{-- Hardcoded duplicate of the dropdown trigger in blade to prevent Vue pop in --}}
 <button
-    v-if="false"
+    :class="{'absolute right-0 animate-out fade-out duration-700 fill-mode-forwards':true}"
     class="
         inline-flex items-center justify-center whitespace-nowrap shrink-0
         font-medium antialiased cursor-pointer no-underline
@@ -21,7 +21,7 @@ class="
         <ui-button
             variant="ghost"
             icon="chevron-vertical"
-            class="[&_svg]:size-3! h-8! w-4! hover:bg-gray-300/5! -ml-3 mr-1"
+            class="[&_svg]:size-3! h-8! w-4! hover:bg-gray-300/5! -ml-3 mr-1 animate-in fade-in duration-500"
             :aria-label="'{{ __('Options for') }} {{ __($breadcrumb->text()) }}'"
             aria-haspopup="true"
             aria-expanded="false"
diff --git a/resources/views/components/breadcrumbs/index.blade.php b/resources/views/components/breadcrumbs/index.blade.php
index 51bbf0964d2..5e71d48ebe5 100644
--- a/resources/views/components/breadcrumbs/index.blade.php
+++ b/resources/views/components/breadcrumbs/index.blade.php
@@ -1,6 +1,6 @@
 <div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs>
     @foreach($breadcrumbs as $breadcrumb)
-        <div class="items-center gap-2 md:flex">
+        <div class="items-center gap-2 md:flex relative">
             <span class="text-white/30">/</span>
             <a
                 class="

From a2d2d13baa3a12376d1d8e17f743bf4696757ae8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 17 Sep 2025 12:58:58 +0100
Subject: [PATCH 47/50] Smoothly blend the Blade > Vue replacement of the site
 selector on page load

---
 packages/ui/src/Combobox.vue                              | 4 +++-
 resources/js/components/GlobalSiteSelector.vue            | 2 +-
 resources/views/components/global-site-selector.blade.php | 2 +-
 resources/views/partials/global-header.blade.php          | 4 +++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/Combobox.vue b/packages/ui/src/Combobox.vue
index 6d1739383f6..d3a678c8b76 100644
--- a/packages/ui/src/Combobox.vue
+++ b/packages/ui/src/Combobox.vue
@@ -308,7 +308,9 @@ defineExpose({
 
                             <button type="button" v-else class="w-full text-start bg-transparent truncate flex items-center gap-2 cursor-pointer focus:outline-none" @keydown.space="openOnSpace" data-ui-combobox-selected-option>
                                 <slot name="selected-option" v-bind="{ option: selectedOption }">
-                                    <Icon v-if="icon" :name="icon" class="text-white/85 dark:text-white dark:opacity-50" />
+                                    <div class="size-4">
+                                        <Icon v-if="icon" :name="icon" class="text-white/85 dark:text-white dark:opacity-50" />
+                                    </div>
                                     <span v-if="labelHtml" v-html="getOptionLabel(selectedOption)" />
                                     <span v-else v-text="getOptionLabel(selectedOption)" />
                                 </slot>
diff --git a/resources/js/components/GlobalSiteSelector.vue b/resources/js/components/GlobalSiteSelector.vue
index 9b3025deb13..3115e0aa1b9 100644
--- a/resources/js/components/GlobalSiteSelector.vue
+++ b/resources/js/components/GlobalSiteSelector.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex h-full items-center" data-ui-global-site-selector>
+    <div class="flex h-full items-center animate-in fade-in duration-600 fill-mode-forwards" data-ui-global-site-selector>
         <Select
             :model-value="active"
             :options="sites"
diff --git a/resources/views/components/global-site-selector.blade.php b/resources/views/components/global-site-selector.blade.php
index dafd3f883bd..4c16210b58d 100644
--- a/resources/views/components/global-site-selector.blade.php
+++ b/resources/views/components/global-site-selector.blade.php
@@ -1,6 +1,7 @@
 <global-site-selector></global-site-selector>
 
 <div
+    :class="{'absolute inset-0 animate-out fade-out duration-900 fill-mode-forwards':true}"
     class="
         antialiased bg-transparent border-none cursor-pointer
         dark:hover:bg-white/15 dark:hover:text-gray-200 dark:text-gray-300
@@ -8,7 +9,6 @@ class="
         items-center justify-between px-3 rounded-lg text-[0.8125rem] text-gray-900
     "
     data-ui-combobox-trigger
-    v-if="false"
 >
     <div class="flex-1 min-w-0">
         <button
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
index 41aed0bbf27..87b7aac53b7 100644
--- a/resources/views/partials/global-header.blade.php
+++ b/resources/views/partials/global-header.blade.php
@@ -40,7 +40,9 @@
 
     <div class="dark flex-1 flex gap-1 md:gap-3 items-center justify-end shrink-0">
         @if (Statamic\Facades\Site::authorized()->count() > 1)
-            <x-statamic::global-site-selector />
+            <div class="relative">
+                <x-statamic::global-site-selector />
+            </div>
         @endif
         <div class="flex items-center">
             <x-statamic::command-palette />

From 8b28d5f2ef2eed28365d19be11466ab35bfd03c7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 17 Sep 2025 13:13:37 +0100
Subject: [PATCH 48/50] Smoothly blend the Blade > Vue replacement of the site
 selector on page load - tweak timing

---
 resources/js/components/GlobalSiteSelector.vue            | 2 +-
 resources/views/components/global-site-selector.blade.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/GlobalSiteSelector.vue b/resources/js/components/GlobalSiteSelector.vue
index 3115e0aa1b9..ef5a2697411 100644
--- a/resources/js/components/GlobalSiteSelector.vue
+++ b/resources/js/components/GlobalSiteSelector.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex h-full items-center animate-in fade-in duration-600 fill-mode-forwards" data-ui-global-site-selector>
+    <div class="flex h-full items-center animate-in fade-in duration-750 fill-mode-forwards" data-ui-global-site-selector>
         <Select
             :model-value="active"
             :options="sites"
diff --git a/resources/views/components/global-site-selector.blade.php b/resources/views/components/global-site-selector.blade.php
index 4c16210b58d..b4b659c5f6b 100644
--- a/resources/views/components/global-site-selector.blade.php
+++ b/resources/views/components/global-site-selector.blade.php
@@ -1,7 +1,7 @@
 <global-site-selector></global-site-selector>
 
 <div
-    :class="{'absolute inset-0 animate-out fade-out duration-900 fill-mode-forwards':true}"
+    :class="{'absolute inset-0 animate-out fade-out duration-1200 fill-mode-forwards':true}"
     class="
         antialiased bg-transparent border-none cursor-pointer
         dark:hover:bg-white/15 dark:hover:text-gray-200 dark:text-gray-300

From 90f3301d28f8bdb7455bf0eeaad9321ba0cd85a8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 17 Sep 2025 14:05:41 +0100
Subject: [PATCH 49/50] Rename entry-animation to starting-style-transition to
 more accurately reflect what it does (and hopefully make Jason happier)

---
 packages/ui/src/Header.vue                        |  2 +-
 packages/ui/src/Panel/Panel.vue                   |  2 +-
 resources/css/core/animation.css                  | 14 +++++++-------
 resources/js/components/blueprints/Fields.vue     |  2 +-
 resources/js/components/ui/Listing/Listing.vue    |  4 ++--
 resources/js/components/ui/Listing/Presets.vue    |  2 +-
 resources/js/components/ui/Listing/TableBody.vue  |  2 +-
 resources/js/components/ui/Publish/Tabs.vue       |  2 +-
 resources/js/components/ui/Widget.vue             |  4 ++--
 resources/js/components/updater/Updater.vue       |  2 +-
 resources/views/blueprints/index.blade.php        |  2 +-
 resources/views/collections/empty.blade.php       |  2 +-
 resources/views/components/docs-callout.blade.php |  2 +-
 resources/views/dashboard/dashboard.blade.php     |  2 +-
 resources/views/usergroups/empty.blade.php        |  2 +-
 resources/views/utilities/index.blade.php         |  2 +-
 16 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/Header.vue b/packages/ui/src/Header.vue
index be7746db4b9..fde05a0f5ed 100644
--- a/packages/ui/src/Header.vue
+++ b/packages/ui/src/Header.vue
@@ -8,7 +8,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <header class="flex flex-wrap items-center justify-between gap-4 py-8 entry-animate-in" data-ui-header>
+    <header class="flex flex-wrap items-center justify-between gap-4 py-8 starting-style-transition" data-ui-header>
         <h1 class="text-[25px] leading-[1.25] st-text-legibility font-medium antialiased flex items-center gap-2.5 flex-1">
             <!-- Wrap icon in a fixed size div (the same size as the icon) to prevent layout shift once it loads -->
             <div v-if="icon" class="size-5">
diff --git a/packages/ui/src/Panel/Panel.vue b/packages/ui/src/Panel/Panel.vue
index e6c1b2e4cc1..da82457e75a 100644
--- a/packages/ui/src/Panel/Panel.vue
+++ b/packages/ui/src/Panel/Panel.vue
@@ -13,7 +13,7 @@ const props = defineProps({
     <div
         :class="[
             'relative bg-gray-200/50 dark:bg-gray-950 dark:inset-shadow-2xs dark:inset-shadow-black',
-            'w-full rounded-2xl mb-5 p-1.5 [&:has([data-ui-panel-header])]:pt-0 focus-none entry-animate-in entry-animate-in--siblings',
+            'w-full rounded-2xl mb-5 p-1.5 [&:has([data-ui-panel-header])]:pt-0 focus-none starting-style-transition starting-style-transition--siblings',
         ]"
         data-ui-panel
     >
diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index bcbbd8c5347..684759c79c4 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -56,7 +56,7 @@
     }
 }
 
-/* ENTRY ANIMATIONS
+/* STARTING STYLE TRANSITIONS
 =================================================== */
 /* Notes...
 
@@ -67,8 +67,8 @@
 
 */
 @media (prefers-reduced-motion: no-preference) {
-    .entry-animate-in,
-    .entry-animate-in-children > *,
+    .starting-style-transition,
+    .starting-style-transition-children > *,
     .publish-fields > *,
     .publish-fields-fluid > *  {
         transition: opacity 0.2s;
@@ -77,17 +77,17 @@
         }
     }
 
-    .entry-animate-in--quick {
+    .starting-style-transition--quick {
         transition: opacity 0.1s;
     }
 
-    .entry-animate-in--slow {
+    .starting-style-transition--slow {
         transition: opacity 1s;
     }
 
-    .entry-animate-in--siblings,
+    .starting-style-transition--siblings,
     /* Assume that when we're animating children we want a sibling delay */
-    .entry-animate-in-children > *,
+    .starting-style-transition-children > *,
     .publish-fields > *,
     .publish-fields-fluid > * {
         transition-delay: calc(sibling-index() * 0.01s);
diff --git a/resources/js/components/blueprints/Fields.vue b/resources/js/components/blueprints/Fields.vue
index f8cd4588232..c7a55eac978 100644
--- a/resources/js/components/blueprints/Fields.vue
+++ b/resources/js/components/blueprints/Fields.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div
-            class="blueprint-section-draggable-zone field-grid gap-2! mb-4 entry-animate-in-children"
+            class="blueprint-section-draggable-zone field-grid gap-2! mb-4 starting-style-transition-children"
             :data-tab="tabId"
             :data-section="sectionId"
         >
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 56e54141135..e1f1e2038e2 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -671,7 +671,7 @@ autoApplyState();
 
 <template>
     <slot name="initializing" v-if="shouldShowSkeleton">
-        <div class="flex flex-col gap-4 justify-between mt-3 entry-animate-in entry-animate-in--slow">
+        <div class="flex flex-col gap-4 justify-between mt-3 starting-style-transition starting-style-transition--slow">
             <ui-skeleton class="h-5 w-48" />
             <div class="flex gap-3">
                 <ui-skeleton class="h-9 w-96" />
@@ -684,7 +684,7 @@ autoApplyState();
     </slot>
     <slot v-if="!initializing" :items="items" :is-column-visible="isColumnVisible" :loading="loading">
         <Presets v-if="showPresets" />
-        <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative flex items-center gap-3 min-h-16 entry-animate-in entry-animate-in--siblings">
+        <div v-if="allowSearch || hasFilters || allowCustomizingColumns" class="relative flex items-center gap-3 min-h-16 starting-style-transition starting-style-transition--siblings">
             <div class="flex flex-1 items-center gap-3 w-full">
                 <Search v-if="allowSearch" />
                 <Filters v-if="hasFilters" />
diff --git a/resources/js/components/ui/Listing/Presets.vue b/resources/js/components/ui/Listing/Presets.vue
index 3607673d896..3da6462e9c8 100644
--- a/resources/js/components/ui/Listing/Presets.vue
+++ b/resources/js/components/ui/Listing/Presets.vue
@@ -160,7 +160,7 @@ function deletePreset() {
 
 <template>
     <div
-        class="relative flex shrink-0 space-x-2 border-b border-gray-200 text-sm text-gray-500 dark:border-gray-700/50 dark:text-gray-500 entry-animate-in"
+        class="relative flex shrink-0 space-x-2 border-b border-gray-200 text-sm text-gray-500 dark:border-gray-700/50 dark:text-gray-500 starting-style-transition"
     >
         <PresetTrigger :active="!activePreset" @click="viewAll" :text="__('All')" />
         <PresetTrigger
diff --git a/resources/js/components/ui/Listing/TableBody.vue b/resources/js/components/ui/Listing/TableBody.vue
index 2aacb1d2bd1..8523e790787 100644
--- a/resources/js/components/ui/Listing/TableBody.vue
+++ b/resources/js/components/ui/Listing/TableBody.vue
@@ -78,7 +78,7 @@ function handleRowClick(event, index) {
             <tr
                 v-for="(row, index) in items"
                 :key="row.id"
-                class="sortable-row outline-hidden entry-animate-in entry-animate-in--siblings"
+                class="sortable-row outline-hidden starting-style-transition starting-style-transition--siblings"
                 :data-row="isSelected(row.id) ? 'selected' : 'unselected'"
                 @click="handleRowClick($event, index)"
             >
diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 83a9ba57030..80c976b6ba9 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -119,7 +119,7 @@ function tabHasError(tab) {
                     </TabProvider>
                 </template>
 
-                <aside class="space-y-6 entry-animate-in-children" v-if="shouldShowSidebar">
+                <aside class="space-y-6 starting-style-transition-children" v-if="shouldShowSidebar">
                     <slot name="actions" />
                     <TabProvider v-if="sidebarTab" :tab="sidebarTab">
                         <Sections />
diff --git a/resources/js/components/ui/Widget.vue b/resources/js/components/ui/Widget.vue
index b3e640d60b9..97f080f24a7 100644
--- a/resources/js/components/ui/Widget.vue
+++ b/resources/js/components/ui/Widget.vue
@@ -8,8 +8,8 @@ defineProps({
 </script>
 
 <template>
-    <Card inset class="@container/widget min-h-54 entry-animate-in" v-cloak>
-        <div class="flex h-full min-h-54 flex-col entry-animate-in">
+    <Card inset class="@container/widget min-h-54 starting-style-transition" v-cloak>
+        <div class="flex h-full min-h-54 flex-col starting-style-transition">
             <header class="flex items-center min-h-[49px] justify-between border-b border-gray-200 px-4.5 py-2 dark:border-gray-700">
                 <div class="flex items-center gap-3">
                     <Icon :name="icon" class="hidden! size-5 text-gray-500 @xs/widget:block!" />
diff --git a/resources/js/components/updater/Updater.vue b/resources/js/components/updater/Updater.vue
index 89752b476ad..96b1cf55fd1 100644
--- a/resources/js/components/updater/Updater.vue
+++ b/resources/js/components/updater/Updater.vue
@@ -7,7 +7,7 @@
             </template>
         </ui-header>
 
-        <ui-card v-if="gettingChangelog" class="text-center entry-animate-in" v-cloak>
+        <ui-card v-if="gettingChangelog" class="text-center starting-style-transition" v-cloak>
             <Icon name="loading" />
         </ui-card>
 
diff --git a/resources/views/blueprints/index.blade.php b/resources/views/blueprints/index.blade.php
index f77fc506fed..5464e0c217a 100644
--- a/resources/views/blueprints/index.blade.php
+++ b/resources/views/blueprints/index.blade.php
@@ -44,7 +44,7 @@
         </ui-dropdown>
     </ui-header>
 
-    <section class="space-y-6 entry-animate-in-children" v-cloak>
+    <section class="space-y-6 starting-style-transition-children" v-cloak>
     @if (Statamic\Facades\Collection::all()->count() > 0)
         <ui-subheading size="lg" class="mb-2">{{ __('Collections') }}</ui-subheading>
             <ui-panel>
diff --git a/resources/views/collections/empty.blade.php b/resources/views/collections/empty.blade.php
index a16d7c998be..0e13ecdf3f3 100644
--- a/resources/views/collections/empty.blade.php
+++ b/resources/views/collections/empty.blade.php
@@ -5,7 +5,7 @@
 @section('content-card-modifiers', 'bg-architectural-lines')
 
 @section('content')
-    <header class="py-8 mt-8 text-center entry-animate-in" v-cloak>
+    <header class="py-8 mt-8 text-center starting-style-transition" v-cloak>
         <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-3">
             <ui-icon name="collections" class="size-5 text-gray-500"></ui-icon>
             <span v-pre>{{ $collection->title() }}</span>
diff --git a/resources/views/components/docs-callout.blade.php b/resources/views/components/docs-callout.blade.php
index 9c5fbaeacf6..afc0c2f5991 100644
--- a/resources/views/components/docs-callout.blade.php
+++ b/resources/views/components/docs-callout.blade.php
@@ -3,7 +3,7 @@
 @endphp
 
 @if (config('statamic.cp.link_to_docs'))
-    <div class="mt-12 flex justify-center text-center entry-animate-in entry-animate-in--siblings">
+    <div class="mt-12 flex justify-center text-center starting-style-transition starting-style-transition--siblings">
         <ui-command-palette-item
             :text="[__('Statamic Documentation'), '{{ $topic }}']"
             icon="book-next-page"
diff --git a/resources/views/dashboard/dashboard.blade.php b/resources/views/dashboard/dashboard.blade.php
index baf88f3fb65..428667bbb8f 100644
--- a/resources/views/dashboard/dashboard.blade.php
+++ b/resources/views/dashboard/dashboard.blade.php
@@ -11,7 +11,7 @@
 
 <div class="widgets @container/widgets flex flex-wrap py-2 gap-y-6 -mx-3">
     @foreach ($widgets as $widget)
-        <div class="{{ Statamic\Support\Str::tailwindWidthClass($widget['width']) }} {{ $widget['classes'] }} min-h-54 px-3 entry-animate-in entry-animate-in--siblings">
+        <div class="{{ Statamic\Support\Str::tailwindWidthClass($widget['width']) }} {{ $widget['classes'] }} min-h-54 px-3 starting-style-transition starting-style-transition--siblings">
             {!! $widget['html'] !!}
         </div>
     @endforeach
diff --git a/resources/views/usergroups/empty.blade.php b/resources/views/usergroups/empty.blade.php
index 7af3d0188fe..a2606c0e4ae 100644
--- a/resources/views/usergroups/empty.blade.php
+++ b/resources/views/usergroups/empty.blade.php
@@ -5,7 +5,7 @@
 @section('content-card-modifiers', 'bg-architectural-lines')
 
 @section('content')
-    <header class="py-8 mt-8 text-center entry-animate-in" v-cloak>
+    <header class="py-8 mt-8 text-center starting-style-transition" v-cloak>
         <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-3">
             <ui-icon name="groups" class="size-5 text-gray-500"></ui-icon>
             {{ __('User Groups') }}
diff --git a/resources/views/utilities/index.blade.php b/resources/views/utilities/index.blade.php
index b8449451d30..0880caac2cf 100644
--- a/resources/views/utilities/index.blade.php
+++ b/resources/views/utilities/index.blade.php
@@ -9,7 +9,7 @@
     <ui-header title="{{ __('Utilities') }}" icon="utilities" />
 
     <ui-card-panel>
-        <div class="flex flex-wrap entry-animate-in-children" v-cloak>
+        <div class="flex flex-wrap starting-style-transition-children" v-cloak>
             @foreach ($utilities as $utility)
                 <a
                     href="{{ $utility->url() }}"

From c033009477d0556baa3f476853598ee214b7b59a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 17 Sep 2025 14:54:12 +0100
Subject: [PATCH 50/50] Speed up entry animations a touch

---
 resources/css/core/animation.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/css/core/animation.css b/resources/css/core/animation.css
index 684759c79c4..3da1b490bbb 100644
--- a/resources/css/core/animation.css
+++ b/resources/css/core/animation.css
@@ -71,14 +71,14 @@
     .starting-style-transition-children > *,
     .publish-fields > *,
     .publish-fields-fluid > *  {
-        transition: opacity 0.2s;
+        transition: opacity 0.1s;
         @starting-style {
             opacity: 0;
         }
     }
 
     .starting-style-transition--quick {
-        transition: opacity 0.1s;
+        transition: opacity 0.05s;
     }
 
     .starting-style-transition--slow {