Handle skipped view transition promises in event filter

contao/templates/frontend/event_filter.html.twig

@@ -132,6 +132,7 @@
     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;
@@ -142,8 +143,13 @@
             return;
         }
 
+        if (activeViewTransition) {
+            mutation();
+            return;
+        }
+
         try {
-            document.startViewTransition(() => {
+            const transition = document.startViewTransition(() => {
                 isViewTransitionMutation = true;
 
                 try {
@@ -152,6 +158,26 @@
                     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();
         }
@@ -293,13 +319,7 @@
         clearHideTimer(eventItem);
 
         if (eventItem.hidden) {
-            if (supportsViewTransitions && !isViewTransitionMutation) {
+            eventItem.hidden = false;
-                runWithLayoutTransition(() => {
-                    eventItem.hidden = false;
-                });
-            } else {
-                eventItem.hidden = false;
-            }
         }
 
         requestAnimationFrame(() => {
@@ -312,13 +332,7 @@
         eventItem.classList.add('is-filtered-out');
 
         const timer = window.setTimeout(() => {
-            if (supportsViewTransitions && !isViewTransitionMutation) {
+            eventItem.hidden = true;
-                runWithLayoutTransition(() => {
-                    eventItem.hidden = true;
-                });
-            } else {
-                eventItem.hidden = true;
-            }
 
             hideTimers.delete(eventItem);
         }, animationMs);