Use AnimatedList component in device list

1 files changed, 8 insertions, 7 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 ce79e980e4..28fd4aa84d 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,20 +1,21 @@
-import { IDevice } from '../../../shared/daemon-rpc-types';
 import { Flex, Spinner } from '../../lib/components';
+import { AnimatedList } from '../../lib/components/animated-list';
 import { DeviceListItem } from '../device-list-item';
-import List from '../List';
 import { useGetDevices } from './hooks';
 
-const getDeviceKey = (device: IDevice): string => device.id;
-
 export function DeviceList() {
   const devices = useGetDevices();
   const showList = devices.length > 0;
   return (
     <Flex $flexDirection="column" $alignItems="center">
       {showList ? (
-        <List items={devices} getKey={getDeviceKey} skipInitialAddTransition>
-          {(device) => <DeviceListItem device={device} />}
-        </List>
+        <AnimatedList>
+          {devices.map((device) => (
+            <AnimatedList.Item key={device.id}>
+              <DeviceListItem device={device} />
+            </AnimatedList.Item>
+          ))}
+        </AnimatedList>
       ) : (
         <Spinner size="big" />
       )}