Merge branch 'fix-app-list-race'

3 files changed, 32 insertions, 1 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 850e8ad35a..ee11ea0dce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,8 @@ Line wrap the file at 100 chars.                                              Th
 
 #### Windows
 - Fix "Open Mullvad VPN" tray context menu item not working after toggling unpinned window setting.
+- Fix apps not always visible in split tunneling view after browsing for an app and then removing it
+  from the excluded applications.
 
 ### Security
 #### Android
diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index c53456cc65..a6fcfa7be7 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -566,7 +566,11 @@ class ApplicationMain {
 
       if (process.env.NODE_ENV === 'development') {
         await this.installDevTools();
-        this.windowController.window.webContents.openDevTools({ mode: 'detach' });
+
+        // The devtools doesn't open on Windows if openDevTools is called without a delay here.
+        this.windowController.window.once('ready-to-show', () => {
+          this.windowController?.window?.webContents.openDevTools({ mode: 'detach' });
+        });
       }
 
       switch (process.platform) {
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) => (