Add fallback timer for removing list items if onTransitionEnd fails

1 files changed, 25 insertions, 0 deletions

diff --git a/gui/src/renderer/components/List.tsx b/gui/src/renderer/components/List.tsx
index a0d7a3ec5c..031fcdfd1d 100644
--- a/gui/src/renderer/components/List.tsx
+++ b/gui/src/renderer/components/List.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Scheduler } from '../../shared/scheduler';
 import Accordion from './Accordion';
 
 export const stringValueAsKey = (value: string): string => value;
@@ -28,6 +29,8 @@ export default function List<T>(props: ListProps<T>) {
   // Skip add transition on first render when initial items are added.
   const skipAddTransition = useRef(props.skipInitialAddTransition ?? false);
 
+  const removeFallbackSchedulers = useRef<Record<string, Scheduler>>({});
+
   useEffect(() => {
     setDisplayItems((prevItems) => {
       if (props.skipRemoveTransition) {
@@ -46,9 +49,31 @@ export default function List<T>(props: ListProps<T>) {
   }, []);
 
   const onRemoved = useCallback((key: string) => {
+    removeFallbackSchedulers.current[key].cancel();
+    delete removeFallbackSchedulers.current[key];
+
     setDisplayItems((items) => items.filter((item) => item.key !== key));
   }, []);
 
+  useEffect(() => {
+    // Add scheduled item removal if `onTransitionEnd` doesn't trigger for some reason.
+    displayItems
+      .filter((item) => item.removing && removeFallbackSchedulers.current[item.key] === undefined)
+      .forEach((item) => {
+        const scheduler = new Scheduler();
+        scheduler.schedule(() => onRemoved(item.key), 400);
+        removeFallbackSchedulers.current[item.key] = scheduler;
+      });
+  }, [displayItems]);
+
+  useEffect(
+    () => () => {
+      // Cancel all schedulers on unmount
+      Object.values(removeFallbackSchedulers).forEach((scheduler) => scheduler.cancel());
+    },
+    [],
+  );
+
   return (
     <>
       {displayItems.map((displayItem) => (