Show spinner when linux application list is not ready to display

3 files changed, 21 insertions, 2 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/LinuxSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/LinuxSettings.tsx
index c0970d13dc..fc9a7c3ca3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/LinuxSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/LinuxSettings.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { strings } from '../../../../../../shared/constants';
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
-import { Flex } from '../../../../../lib/components';
+import { Flex, Spinner } from '../../../../../lib/components';
 import { FlexColumn } from '../../../../../lib/components/flex-column';
 import { useAfterTransition } from '../../../../../lib/transition-hooks';
 import { useEffectEvent } from '../../../../../lib/utility-hooks';
@@ -11,7 +11,7 @@ import SettingsHeader, { HeaderSubTitle, HeaderTitle } from '../../../../Setting
 import { ApplicationSearchBar } from '../application-search-bar';
 import { ApplicationSearchNoResult } from '../application-search-no-result';
 import { LaunchErrorDialog, LinuxApplicationList, OpenFilePickerButton } from './components';
-import { useShowLinuxApplicationList, useShowNoSearchResult } from './hooks';
+import { useShowLinuxApplicationList, useShowNoSearchResult, useShowSpinner } from './hooks';
 import { LinuxSettingsContextProvider, useLinuxSettingsContext } from './LinuxSettingsContext';
 
 function LinuxSettingsInner() {
@@ -20,6 +20,7 @@ function LinuxSettingsInner() {
   const runAfterTransition = useAfterTransition();
   const showLinuxApplicationList = useShowLinuxApplicationList();
   const showNoSearchResult = useShowNoSearchResult();
+  const showSpinner = useShowSpinner();
 
   const updateApplications = useEffectEvent(() => {
     runAfterTransition(async () => {
@@ -50,6 +51,11 @@ function LinuxSettingsInner() {
       {showNoSearchResult && <ApplicationSearchNoResult searchTerm={searchTerm} />}
       <FlexColumn $gap="medium">
         {showLinuxApplicationList && <LinuxApplicationList />}
+        {showSpinner && (
+          <Flex $justifyContent="center" $margin={{ top: 'large' }}>
+            <Spinner size="big" />
+          </Flex>
+        )}
         <Flex $margin={{ horizontal: 'medium', bottom: 'large' }}>
           <OpenFilePickerButton />
         </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/hooks/index.ts
index 103337c62a..4acd4bba98 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './use-filtered-applications';
 export * from './use-launch-application';
 export * from './use-show-linux-application-list';
 export * from './use-show-no-search-result';
+export * from './use-show-spinner';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/hooks/use-show-spinner.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/hooks/use-show-spinner.ts
new file mode 100644
index 0000000000..d95d2f2f3d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/split-tunneling/components/linux-settings/hooks/use-show-spinner.ts
@@ -0,0 +1,12 @@
+import { useLinuxSettingsContext } from '../LinuxSettingsContext';
+import { useFilteredApplications } from './use-filtered-applications';
+
+export function useShowSpinner() {
+  const { searchTerm } = useLinuxSettingsContext();
+  const filteredApplications = useFilteredApplications();
+
+  const showNoSearchResult =
+    searchTerm === '' && (filteredApplications === undefined || filteredApplications.length === 0);
+
+  return showNoSearchResult;
+}