diff options
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; +} |