6 files changed, 28 insertions, 24 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list/DeviceList.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/DeviceList.tsx
index 28fd4aa84d..fab2f5f648 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/device-list/DeviceList.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/device-list/DeviceList.tsx
@@ -1,24 +1,19 @@
-import { Flex, Spinner } from '../../lib/components';
+import { IDevice } from '../../../shared/daemon-rpc-types';
 import { AnimatedList } from '../../lib/components/animated-list';
 import { DeviceListItem } from '../device-list-item';
-import { useGetDevices } from './hooks';
 
-export function DeviceList() {
-  const devices = useGetDevices();
-  const showList = devices.length > 0;
+export type DeviceListProps = {
+  devices: IDevice[];
+};
+
+export function DeviceList({ devices }: DeviceListProps) {
   return (
-    <Flex $flexDirection="column" $alignItems="center">
-      {showList ? (
-        <AnimatedList>
-          {devices.map((device) => (
-            <AnimatedList.Item key={device.id}>
-              <DeviceListItem device={device} />
-            </AnimatedList.Item>
-          ))}
-        </AnimatedList>
-      ) : (
-        <Spinner size="big" />
-      )}
-    </Flex>
+    <AnimatedList>
+      {devices.map((device) => (
+        <AnimatedList.Item key={device.id}>
+          <DeviceListItem device={device} />
+        </AnimatedList.Item>
+      ))}
+    </AnimatedList>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/ManageDevicesView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/ManageDevicesView.tsx
index ca8c57fd3a..f0e29689fb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/ManageDevicesView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/ManageDevicesView.tsx
@@ -1,5 +1,5 @@
 import { messages } from '../../../../shared/gettext';
-import { Text } from '../../../lib/components';
+import { Flex, Spinner, Text } from '../../../lib/components';
 import { FlexColumn } from '../../../lib/components/flex-column';
 import { View } from '../../../lib/components/view';
 import { useHistory } from '../../../lib/history';
@@ -8,9 +8,12 @@ import { DeviceList } from '../../device-list';
 import { BackAction } from '../../KeyboardNavigation';
 import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
+import { useGetDevices } from './hooks';
 
 export function ManageDevicesView() {
   const { pop } = useHistory();
+  const devices = useGetDevices();
+  const showDeviceList = devices.length > 0;
 
   return (
     <BackAction action={pop}>
@@ -41,7 +44,13 @@ export function ManageDevicesView() {
                   </Text>
                 </FlexColumn>
               </View.Container>
-              <DeviceList />
+              {showDeviceList ? (
+                <DeviceList devices={devices} />
+              ) : (
+                <Flex $flexDirection="column" $alignItems="center">
+                  <Spinner size="big" />
+                </Flex>
+              )}
             </FlexColumn>
           </NavigationScrollbars>
         </NavigationContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts
index 1ada24c505..1ada24c505 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/index.ts
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/use-get-devices.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts
index b48b458775..4c0b290be9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/use-get-devices.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-get-devices.ts
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { useAppContext } from '../../../context';
-import { useSelector } from '../../../redux/store';
+import { useAppContext } from '../../../../context';
+import { useSelector } from '../../../../redux/store';
 import { useSortedDevices } from './use-sorted-devices';
 
 export const useGetDevices = () => {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/use-sorted-devices.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-sorted-devices.ts
index 4de9d694bf..e364188191 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/device-list/hooks/use-sorted-devices.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/manage-devices/hooks/use-sorted-devices.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useSelector } from '../../../redux/store';
+import { useSelector } from '../../../../redux/store';
 
 export const useSortedDevices = () => {
   const devices = useSelector((state) => state.account.devices);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/too-many-devices/TooManyDevicesView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/too-many-devices/TooManyDevicesView.tsx
index 6596302f4e..8ca04797e1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/too-many-devices/TooManyDevicesView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/too-many-devices/TooManyDevicesView.tsx
@@ -62,7 +62,7 @@ export function TooManyDevicesView() {
                 </Text>
                 <Text variant="labelTiny">{subtitle}</Text>
               </View.Container>
-              <DeviceList />
+              <DeviceList devices={devices} />
             </>
           )}