diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/device-list/DeviceList.tsx | 15 |
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" /> )} |