Handle skipped view transition promises in event filter

contao/templates/frontend/event_filter.html.twig

@@ -37,6 +37,21 @@
     <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
 </div>
 
+<style>
+    .event-filter-target-list {
+        view-transition-name: event-filter-list;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+        ::view-transition-group(event-filter-list),
+        ::view-transition-old(event-filter-list),
+        ::view-transition-new(event-filter-list) {
+            animation-duration: 240ms;
+            animation-timing-function: ease;
+        }
+    }
+</style>
+
 <script type="module">
     const filters = document.getElementById('eventfilters');
 
@@ -116,9 +131,58 @@
 
     const animationMs = 220;
     let hideTimers = new WeakMap();
+    const supportsViewTransitions = typeof document.startViewTransition === 'function';
+    let activeViewTransition = null;
+    let isViewTransitionMutation = false;
     let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
+    const runWithLayoutTransition = (mutation) => {
+        if (!supportsViewTransitions) {
+            mutation();
+            return;
+        }
+
+        if (activeViewTransition) {
+            mutation();
+            return;
+        }
+
+        try {
+            const transition = document.startViewTransition(() => {
+                isViewTransitionMutation = true;
+
+                try {
+                    mutation();
+                } finally {
+                    isViewTransitionMutation = false;
+                }
+            });
+
+            activeViewTransition = transition;
+
+            transition.ready.catch(() => {
+                // Can reject when the transition is skipped.
+            });
+
+            transition.updateCallbackDone.catch(() => {
+                // Keep skipped/aborted update callbacks from surfacing as uncaught.
+            });
+
+            transition.finished
+                .catch(() => {
+                    // Browsers can skip overlapping transitions; ignore these rejections.
+                })
+                .finally(() => {
+                    if (activeViewTransition === transition) {
+                        activeViewTransition = null;
+                    }
+                });
+        } catch (error) {
+            mutation();
+        }
+    };
+
     const hasOptionValue = (selectElement, value) => {
         if (!selectElement) {
             return false;
@@ -253,7 +317,10 @@
 
     const showEvent = (eventItem) => {
         clearHideTimer(eventItem);
-        eventItem.hidden = false;
+
+        if (eventItem.hidden) {
+            eventItem.hidden = false;
+        }
 
         requestAnimationFrame(() => {
             eventItem.classList.remove('is-filtered-out');
@@ -266,6 +333,7 @@
 
         const timer = window.setTimeout(() => {
             eventItem.hidden = true;
+
             hideTimers.delete(eventItem);
         }, animationMs);
 
@@ -332,7 +400,7 @@
             return;
         }
 
-        const visibleCount = events.filter((eventItem) => !eventItem.hidden).length;
+        const visibleCount = events.filter((eventItem) => matches(eventItem, filterState)).length;
         let filterText = 'alle';
 
         if (filterState.type === 'tag' && tagSelect) {
@@ -357,12 +425,14 @@
         currentFilter = filterState;
         setActiveControl(filterState);
 
-        events.forEach((eventItem) => {
-            if (matches(eventItem, filterState)) {
-                showEvent(eventItem);
-            } else {
-                hideEvent(eventItem);
-            }
+        runWithLayoutTransition(() => {
+            events.forEach((eventItem) => {
+                if (matches(eventItem, filterState)) {
+                    showEvent(eventItem);
+                } else {
+                    hideEvent(eventItem);
+                }
+            });
         });
 
         updateStatus(filterState);