[6.x] Use entry animations and a base view transition to smooth out Vue loading in

packages/ui/src/Combobox.vue

@@ -296,14 +296,16 @@ 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="openDropdown" 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>
                             </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>

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

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 starting-style-transition starting-style-transition--siblings',
         ]"
         data-ui-panel
     >

resources/css/app.css

@@ -63,4 +63,4 @@
     .dark .content-card {
         background: var(--theme-color-dark-content-bg);
     }
-}
+}

resources/css/core/animation.css

@@ -55,3 +55,41 @@
         animation: rotate 4s linear infinite;
     }
 }
+
+/* STARTING STYLE TRANSITIONS
+=================================================== */
+/* 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
+
+*/
+@media (prefers-reduced-motion: no-preference) {
+    .starting-style-transition,
+    .starting-style-transition-children > *,
+    .publish-fields > *,
+    .publish-fields-fluid > *  {
+        transition: opacity 0.1s;
+        @starting-style {
+            opacity: 0;
+        }
+    }
+
+    .starting-style-transition--quick {
+        transition: opacity 0.05s;
+    }
+
+    .starting-style-transition--slow {
+        transition: opacity 1s;
+    }
+
+    .starting-style-transition--siblings,
+    /* Assume that when we're animating children we want a sibling delay */
+    .starting-style-transition-children > *,
+    .publish-fields > *,
+    .publish-fields-fluid > * {
+        transition-delay: calc(sibling-index() * 0.01s);
+    }
+}

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-750 fill-mode-forwards" data-ui-global-site-selector>
         <Select
             :model-value="active"
             :options="sites"

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 starting-style-transition-children"
             :data-tab="tabId"
             :data-section="sectionId"
         >

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

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/15 text-xs text-white/70 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" />

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>

resources/js/components/forms/FormWidget.vue

@@ -45,8 +45,8 @@ function formatDate(value) {
     >
         <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 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>

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,6 +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);
+const shouldShowSkeleton = useSkeletonDelay(initializing);
 
 const items = computed({
     get() {
@@ -668,21 +670,21 @@ 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" />
+    <slot name="initializing" v-if="shouldShowSkeleton">
+        <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-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>
     </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">
+        <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" />

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 starting-style-transition"
     >
         <PresetTrigger :active="!activePreset" @click="viewAll" :text="__('All')" />
         <PresetTrigger

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 starting-style-transition starting-style-transition--siblings"
                 :data-row="isSelected(row.id) ? 'selected' : 'unselected'"
                 @click="handleRowClick($event, index)"
             >

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 starting-style-transition-children" v-if="shouldShowSidebar">
                     <slot name="actions" />
                     <TabProvider v-if="sidebarTab" :tab="sidebarTab">
                         <Sections />

resources/js/components/ui/Widget.vue

@@ -8,8 +8,8 @@ defineProps({
 </script>
 
 <template>
-    <Card inset class="@container/widget">
-        <div class="flex h-full min-h-54 flex-col">
+    <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!" />

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 starting-style-transition" v-cloak>
             <Icon name="loading" />
         </ui-card>
 

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;
+}

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

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

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

resources/views/components/breadcrumbs/dropdown.blade.php

@@ -0,0 +1,65 @@
+{{-- Hardcoded duplicate of the dropdown trigger in blade to prevent Vue pop in --}}
+<button
+    :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
+        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"
+            icon="chevron-vertical"
+            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"
+        ></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>

resources/views/components/breadcrumbs/index.blade.php

@@ -0,0 +1,24 @@
+<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 relative">
+            <span class="text-white/30">/</span>
+            <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
+        </div>
+    @endforeach
+</div>