Refactor useScrollToListItem hook to return object with ref

23 files changed, 64 insertions, 101 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
index 5a0899a728..9df8e1e143 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/daita-settings/DaitaSettingsView.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
@@ -153,10 +153,8 @@ function DaitaToggle() {
   const daita = useSelector((state) => state.settings.wireguard.daita?.enabled ?? false);
   const directOnly = useSelector((state) => state.settings.wireguard.daita?.directOnly ?? false);
 
-  const enableId = 'daita-enable-setting';
-  const ref = useRef<HTMLDivElement>(null);
-  const scrollToEnable = useScrollToListItem(ref, enableId);
-  const scrollToDirectOnly = useScrollToListItem();
+  const { ref, animation: enableAnimation } = useScrollToListItem('daita-enable-setting');
+  const { animation: directOnlyAnimation } = useScrollToListItem();
 
   const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] = useBoolean();
 
@@ -195,7 +193,7 @@ function DaitaToggle() {
         disabled={unavailable}
         checked={daita && !unavailable}
         onCheckedChange={setDaita}
-        animation={scrollToEnable?.animation}>
+        animation={enableAnimation}>
         <ToggleListItem.Label>{messages.gettext('Enable')}</ToggleListItem.Label>
         <ToggleListItem.Switch />
       </ToggleListItem>
@@ -203,7 +201,7 @@ function DaitaToggle() {
         disabled={!daita || unavailable}
         checked={directOnly && !unavailable}
         onCheckedChange={setDirectOnly}
-        animation={scrollToDirectOnly?.animation}>
+        animation={directOnlyAnimation}>
         <ToggleListItem.Label>{directOnlyString}</ToggleListItem.Label>
         <ToggleListItem.Group>
           <InfoButton>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx
index 3a1ea69375..b61a7e0681 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/multihop-settings/MultihopSettingsView.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
@@ -70,9 +70,7 @@ function MultihopSetting() {
   const relaySettings = useSelector((state) => state.settings.relaySettings);
   const relaySettingsUpdater = useRelaySettingsUpdater();
 
-  const id = 'multihop-setting';
-  const ref = useRef<HTMLDivElement>(null);
-  const scrollTo = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('multihop-setting');
 
   const multihop = 'normal' in relaySettings ? relaySettings.normal.wireguard.useMultihop : false;
   const unavailable =
@@ -97,7 +95,7 @@ function MultihopSetting() {
     <>
       <ToggleListItem
         ref={ref}
-        animation={scrollTo?.animation}
+        animation={animation}
         disabled={unavailable}
         checked={multihop && !unavailable}
         onCheckedChange={setMultihop}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx
index eaa246d2cb..f49a70e8d2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/bridge-mode-setting/BridgeModeSetting.tsx
@@ -24,9 +24,7 @@ export function BridgeModeSetting() {
 
   const bridgeState = useSelector((state) => state.settings.bridgeState);
 
-  const id = 'bridge-mode-setting';
-  const ref = React.useRef<HTMLDivElement>(null);
-  const scrollToAnchor = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('bridge-mode-setting');
 
   const tunnelProtocol = useMemo(() => {
     const protocol = 'normal' in relaySettings ? relaySettings.normal.tunnelProtocol : 'any';
@@ -60,10 +58,7 @@ export function BridgeModeSetting() {
   const footerText = bridgeModeFooterText(bridgeState === 'on', tunnelProtocol, transportProtocol);
 
   return (
-    <Listbox
-      value={bridgeState}
-      onValueChange={onSelectBridgeState}
-      animation={scrollToAnchor?.animation}>
+    <Listbox value={bridgeState} onValueChange={onSelectBridgeState} animation={animation}>
       <Listbox.Item ref={ref}>
         <Listbox.Content>
           <Listbox.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx
index 0107faca44..5119933d67 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/mss-fix-setting/MssFixSetting.tsx
@@ -18,9 +18,7 @@ export function MssFixSetting() {
   const { setOpenVpnMssfix: setOpenVpnMssfixImpl } = useAppContext();
   const mssfix = useSelector((state) => state.settings.openVpn.mssfix);
 
-  const id = 'mss-fix-setting';
-  const ref = React.useRef<HTMLDivElement>(null);
-  const scrollToAnchor = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('mss-fix-setting');
 
   const inputRef = React.useRef<HTMLInputElement>(null);
   const labelId = React.useId();
@@ -76,7 +74,7 @@ export function MssFixSetting() {
   );
 
   return (
-    <ListItem animation={scrollToAnchor?.animation}>
+    <ListItem animation={animation}>
       <ListItem.Item ref={ref}>
         <ListItem.Content>
           <ListItem.Label id={labelId}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx
index 6fc8fffbb5..68751368cc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/open-vpn-settings/components/transport-protocol-setting/TransportProtocolSetting.tsx
@@ -13,7 +13,7 @@ export function TransportProtocolSetting() {
   const relaySettingsUpdater = useRelaySettingsUpdater();
   const relaySettings = useSelector((state) => state.settings.relaySettings);
   const bridgeState = useSelector((state) => state.settings.bridgeState);
-  const scrollToListItem = useScrollToListItem();
+  const { animation } = useScrollToListItem();
 
   const descriptionId = React.useId();
 
@@ -34,7 +34,7 @@ export function TransportProtocolSetting() {
   );
 
   return (
-    <Listbox animation={scrollToListItem?.animation} value={protocol} onValueChange={onSelect}>
+    <Listbox animation={animation} value={protocol} onValueChange={onSelect}>
       <Listbox.Item>
         <Listbox.Content>
           <Listbox.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx
index b814d5631f..d86e8d5352 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan-setting/AllowLanSetting.tsx
@@ -1,4 +1,3 @@
-import { useRef } from 'react';
 import styled from 'styled-components';
 
 import { messages } from '../../../../../../shared/gettext';
@@ -18,14 +17,12 @@ const LanIpRanges = styled.ul({
 export function AllowLanSetting() {
   const allowLan = useSelector((state) => state.settings.allowLan);
   const { setAllowLan } = useAppContext();
-  const id = 'allow-lan-setting';
-  const ref = useRef<HTMLDivElement>(null);
-  const scrollToAnchor = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('allow-lan-setting');
 
   return (
     <ToggleListItem
       ref={ref}
-      animation={scrollToAnchor?.animation}
+      animation={animation}
       checked={allowLan}
       onCheckedChange={setAllowLan}>
       <ToggleListItem.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx
index 4883f41dc8..7c58b09bf2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-connect-setting/AutoConnectSetting.tsx
@@ -7,7 +7,7 @@ import { ToggleListItem } from '../../../../toggle-list-item';
 export function AutoConnectSetting() {
   const autoConnect = useSelector((state) => state.settings.guiSettings.autoConnect);
   const { setAutoConnect } = useAppContext();
-  const scrollToAnchor = useScrollToListItem();
+  const { animation } = useScrollToListItem();
 
   const footer = messages.pgettext(
     'vpn-settings-view',
@@ -16,7 +16,7 @@ export function AutoConnectSetting() {
 
   return (
     <ToggleListItem
-      animation={scrollToAnchor?.animation}
+      animation={animation}
       checked={autoConnect}
       onCheckedChange={setAutoConnect}
       footer={footer}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx
index e18a249a77..388781ba7f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx
@@ -10,7 +10,7 @@ import { ToggleListItem } from '../../../../toggle-list-item';
 export function AutoStartSetting() {
   const autoStart = useSelector((state) => state.settings.autoStart);
   const { setAutoStart: setAutoStartImpl } = useAppContext();
-  const scrollToAnchor = useScrollToListItem();
+  const { animation } = useScrollToListItem();
 
   const setAutoStart = useCallback(
     async (autoStart: boolean) => {
@@ -25,10 +25,7 @@ export function AutoStartSetting() {
   );
 
   return (
-    <ToggleListItem
-      animation={scrollToAnchor?.animation}
-      checked={autoStart}
-      onCheckedChange={setAutoStart}>
+    <ToggleListItem animation={animation} checked={autoStart} onCheckedChange={setAutoStart}>
       <ToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Launch app on start-up')}
       </ToggleListItem.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx
index 84d5975199..4bbd7a6ebc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/custom-dns-settings/CustomDnsSettings.tsx
@@ -36,9 +36,7 @@ export function CustomDnsSettings() {
   const [savingEdit, setSavingEdit] = useState(false);
   const willShowConfirmationDialog = useRef(false);
 
-  const id = 'custom-dns-settings';
-  const ref = useRef<HTMLDivElement>(null);
-  const scrollToAnchor = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('custom-dns-settings');
 
   const featureAvailable = useMemo(
     () =>
@@ -195,7 +193,7 @@ export function CustomDnsSettings() {
         ref={ref}
         checked={dns.state === 'custom' || inputVisible}
         onCheckedChange={setCustomDnsEnabled}
-        animation={scrollToAnchor?.animation}
+        animation={animation}
         disabled={!featureAvailable}>
         <ToggleListItem.Label>
           {messages.pgettext('vpn-settings-view', 'Use custom DNS server')}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx
index e525e4f5a6..253c425647 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx
@@ -1,4 +1,3 @@
-import { useRef } from 'react';
 import { sprintf } from 'sprintf-js';
 
 import { messages } from '../../../../../../shared/gettext';
@@ -24,9 +23,7 @@ export function DnsBlockerSettings() {
   const dns = useSelector((state) => state.settings.dns);
   const customDnsFeatureName = messages.pgettext('vpn-settings-view', 'Use custom DNS server');
   const [expanded, , , toggleExpanded] = useBoolean();
-  const id = 'dns-blocker-setting';
-  const ref = useRef<HTMLDivElement>(null);
-  const scrollToAnchor = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('dns-blocker-setting');
 
   return (
     <>
@@ -35,7 +32,7 @@ export function DnsBlockerSettings() {
         expanded={expanded}
         onExpandedChange={toggleExpanded}
         disabled={dns.state === 'custom'}
-        animation={scrollToAnchor?.animation}>
+        animation={animation}>
         <Accordion.Header>
           <Accordion.Title>
             {messages.pgettext('vpn-settings-view', 'DNS content blockers')}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx
index 15626f7a88..34c4362926 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6-setting/EnableIpv6Setting.tsx
@@ -12,7 +12,7 @@ import { ToggleListItem } from '../../../../toggle-list-item';
 export function EnableIpv6Setting() {
   const enableIpv6 = useSelector((state) => state.settings.enableIpv6);
   const { setEnableIpv6: setEnableIpv6Impl } = useAppContext();
-  const scrollToAnchor = useScrollToListItem();
+  const { animation } = useScrollToListItem();
 
   const setEnableIpv6 = useCallback(
     async (enableIpv6: boolean) => {
@@ -27,10 +27,7 @@ export function EnableIpv6Setting() {
   );
 
   return (
-    <ToggleListItem
-      animation={scrollToAnchor?.animation}
-      checked={enableIpv6}
-      onCheckedChange={setEnableIpv6}>
+    <ToggleListItem animation={animation} checked={enableIpv6} onCheckedChange={setEnableIpv6}>
       <ToggleListItem.Label>
         {messages.pgettext('vpn-settings-view', 'Enable IPv6')}
       </ToggleListItem.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx
index bd650c84bd..f8596643ca 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/kill-switch-setting/KillSwitchSetting.tsx
@@ -6,10 +6,10 @@ import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
 
 export function KillSwitchSetting() {
-  const scrollToAnchor = useScrollToListItem();
+  const { animation } = useScrollToListItem();
 
   return (
-    <ListItem animation={scrollToAnchor?.animation}>
+    <ListItem animation={animation}>
       <ListItem.Item>
         <ListItem.Content>
           <ListItem.Label>{messages.pgettext('vpn-settings-view', 'Kill switch')}</ListItem.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx
index 6fbef43645..5115dc9964 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/lockdown-mode-setting/LockdownModeSetting.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 
 import { messages } from '../../../../../../shared/gettext';
 import log from '../../../../../../shared/logging';
@@ -14,9 +14,7 @@ import { ToggleListItem } from '../../../../toggle-list-item';
 export function LockdownModeSetting() {
   const blockWhenDisconnected = useSelector((state) => state.settings.blockWhenDisconnected);
   const { setBlockWhenDisconnected: setBlockWhenDisconnectedImpl } = useAppContext();
-  const id = 'lockdown-mode-setting';
-  const ref = useRef<HTMLDivElement>(null);
-  const scrollToAnchor = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('lockdown-mode-setting');
 
   const [confirmationDialogVisible, showConfirmationDialog, hideConfirmationDialog] =
     useBoolean(false);
@@ -52,7 +50,7 @@ export function LockdownModeSetting() {
   return (
     <ToggleListItem
       ref={ref}
-      animation={scrollToAnchor?.animation}
+      animation={animation}
       checked={blockWhenDisconnected}
       onCheckedChange={setLockDownMode}>
       <ToggleListItem.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx
index 149bca6d98..d7acc15fcf 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/open-vpn-settings/OpenVpnSettings.tsx
@@ -9,13 +9,13 @@ import { NavigationListItem } from '../../../../NavigationListItem';
 
 export function OpenVpnSettings() {
   const tunnelProtocol = useTunnelProtocol();
-  const scrollToAnchor = useScrollToListItem();
+  const { animation } = useScrollToListItem();
 
   return (
     <NavigationListItem
       to={RoutePath.openVpnSettings}
       disabled={tunnelProtocol === 'wireguard'}
-      animation={scrollToAnchor?.animation}>
+      animation={animation}>
       <NavigationListItem.Label>
         {sprintf(
           // TRANSLATORS: %(openvpn)s will be replaced with the string "OpenVPN"
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
index fa52864e29..b26bfc6f58 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/tunnel-protocol-setting/TunnelProtocol.tsx
@@ -24,7 +24,7 @@ export function TunnelProtocolSetting() {
   const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant);
   const openVpnDisabled = daita || multihop || quantumResistant;
 
-  const scrollToAnchor = useScrollToListItem();
+  const { animation } = useScrollToListItem();
 
   const featuresToDisableForOpenVpn = [];
   if (daita) {
@@ -66,7 +66,7 @@ export function TunnelProtocolSetting() {
     <Listbox
       onValueChange={setTunnelProtocol}
       value={tunnelProtocol}
-      animation={scrollToAnchor?.animation}
+      animation={animation}
       aria-description={openVpnDisabled ? openVpnDisabledFooter : undefined}>
       <Listbox.Item>
         <Listbox.Content>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx
index 37013cf132..82efa3410e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/wireguard-settings/WireguardSettings.tsx
@@ -22,7 +22,7 @@ function mapRelaySettingsToProtocol(relaySettings: RelaySettingsRedux) {
 }
 
 export function WireguardSettings() {
-  const scrollToAnchor = useScrollToListItem();
+  const { animation } = useScrollToListItem();
   const tunnelProtocol = useSelector((state) =>
     mapRelaySettingsToProtocol(state.settings.relaySettings),
   );
@@ -31,7 +31,7 @@ export function WireguardSettings() {
     <NavigationListItem
       to={RoutePath.wireguardSettings}
       disabled={tunnelProtocol === 'openvpn'}
-      animation={scrollToAnchor?.animation}>
+      animation={animation}>
       <NavigationListItem.Label>
         {sprintf(
           // TRANSLATORS: %(wireguard)s will be replaced with the string "WireGuard"
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx
index 4ff48fdc88..c6d59011d6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/ip-version-setting/IpVersionSetting.tsx
@@ -19,7 +19,7 @@ export function IpVersionSetting() {
     return ipVersion === 'any' ? null : ipVersion;
   }, [relaySettings]);
 
-  const scrollToAnchor = useScrollToListItem();
+  const { animation } = useScrollToListItem();
 
   const setIpVersion = useCallback(
     async (ipVersion: IpVersion | null) => {
@@ -37,7 +37,7 @@ export function IpVersionSetting() {
   );
 
   return (
-    <Listbox value={ipVersion} onValueChange={setIpVersion} animation={scrollToAnchor?.animation}>
+    <Listbox value={ipVersion} onValueChange={setIpVersion} animation={animation}>
       <Listbox.Item>
         <Listbox.Content>
           <Listbox.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx
index 4b4acbb929..a432351834 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/mtu-setting/MtuSetting.tsx
@@ -26,9 +26,7 @@ export function MtuSetting() {
   const { setWireguardMtu: setWireguardMtuImpl } = useAppContext();
   const mtu = useSelector((state) => state.settings.wireguard.mtu);
 
-  const id = 'mtu-setting';
-  const ref = React.useRef<HTMLDivElement>(null);
-  const scrollToAnchor = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('mtu-setting');
 
   const inputRef = React.useRef<HTMLInputElement>(null);
   const labelId = React.useId();
@@ -84,7 +82,7 @@ export function MtuSetting() {
   );
 
   return (
-    <ListItem animation={scrollToAnchor?.animation}>
+    <ListItem animation={animation}>
       <ListItem.Item ref={ref}>
         <ListItem.Content>
           <ListItem.Label id={labelId}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
index 7a9f70590c..630a94fa93 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/obfuscation-settings/ObfuscationSettings.tsx
@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import React from 'react';
 import { sprintf } from 'sprintf-js';
 
 import { Constraint, ObfuscationType } from '../../../../../../shared/daemon-rpc-types';
@@ -24,9 +23,7 @@ export function ObfuscationSettings() {
   const { setObfuscationSettings } = useAppContext();
   const obfuscationSettings = useSelector((state) => state.settings.obfuscationSettings);
 
-  const id = 'obfuscation-setting';
-  const ref = React.useRef<HTMLDivElement>(null);
-  const scrollToAnchor = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('obfuscation-setting');
 
   // TRANSLATORS: Text showing currently selected port.
   // TRANSLATORS: Available placeholders:
@@ -46,10 +43,7 @@ export function ObfuscationSettings() {
   );
 
   return (
-    <Listbox
-      onValueChange={selectObfuscationType}
-      value={obfuscationType}
-      animation={scrollToAnchor?.animation}>
+    <Listbox onValueChange={selectObfuscationType} value={obfuscationType} animation={animation}>
       <Listbox.Item ref={ref}>
         <Listbox.Content>
           <Listbox.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx
index 79f3294c73..33819dec18 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/port-setting/PortSetting.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useMemo } from 'react';
-import React from 'react';
 import { sprintf } from 'sprintf-js';
 
 import { wrapConstraint } from '../../../../../../shared/daemon-rpc-types';
@@ -27,9 +26,7 @@ export function PortSetting() {
   const relaySettingsUpdater = useRelaySettingsUpdater();
   const allowedPortRanges = useSelector((state) => state.settings.wireguardEndpointData.portRanges);
 
-  const id = 'port-setting';
-  const ref = React.useRef<HTMLDivElement>(null);
-  const scrollToAnchor = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('port-setting');
 
   const wireguardPortItems = useMemo<Array<SelectorItem<number>>>(
     () => WIREUGARD_UDP_PORTS.map(mapPortToSelectorItem),
@@ -90,10 +87,7 @@ export function PortSetting() {
     .join(', ');
 
   return (
-    <Listbox
-      value={selectedOption.value}
-      onValueChange={setWireguardPort}
-      animation={scrollToAnchor?.animation}>
+    <Listbox value={selectedOption.value} onValueChange={setWireguardPort} animation={animation}>
       <Listbox.Item ref={ref}>
         <Listbox.Content>
           <Listbox.Label>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx
index 8b5450b66e..9507376879 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/wireguard-settings/components/quantum-resistant-setting/QuantumResistantSetting.tsx
@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import React from 'react';
 
 import { messages } from '../../../../../../shared/gettext';
 import { useAppContext } from '../../../../../context';
@@ -14,9 +13,7 @@ export function QuantumResistantSetting() {
   const { setWireguardQuantumResistant } = useAppContext();
   const quantumResistant = useSelector((state) => state.settings.wireguard.quantumResistant);
 
-  const id = 'quantum-resistant-setting';
-  const ref = React.useRef<HTMLDivElement>(null);
-  const scrollToListItem = useScrollToListItem(ref, id);
+  const { ref, animation } = useScrollToListItem('quantum-resistant-setting');
 
   const selectQuantumResistant = useCallback(
     async (quantumResistant: boolean | null) => {
@@ -27,7 +24,7 @@ export function QuantumResistantSetting() {
 
   return (
     <Listbox
-      animation={scrollToListItem?.animation}
+      animation={animation}
       value={quantumResistant ?? null}
       onValueChange={selectQuantumResistant}>
       <Listbox.Item ref={ref}>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts
index 649fb4cce1..9c376a66f8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
-export const useScrollToReference = (
-  ref?: React.RefObject<HTMLDivElement | null>,
+export const useScrollToReference = <T extends Element = HTMLDivElement>(
+  ref?: React.RefObject<T | null>,
   scroll?: boolean,
 ) => {
   useEffect(() => {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
index b4acae7e58..f2fc7c8486 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
@@ -1,16 +1,17 @@
+import React from 'react';
+
 import { ScrollToAnchorId } from '../../shared/ipc-types';
 import { ListItemAnimation } from '../lib/components/list-item';
 import { useHistory } from '../lib/history';
 import { useScrollToReference } from '.';
 
-export const useScrollToListItem = (
-  ref?: React.RefObject<HTMLDivElement | null>,
+export const useScrollToListItem = <T extends Element = HTMLDivElement>(
   id?: ScrollToAnchorId,
-):
-  | {
-      animation: ListItemAnimation;
-    }
-  | undefined => {
+): {
+  ref?: React.RefObject<T | null>;
+  animation?: ListItemAnimation;
+} => {
+  const ref = React.useRef<T>(null);
   const { location, action } = useHistory();
   const { state } = location;
 
@@ -19,8 +20,14 @@ export const useScrollToListItem = (
   const scroll = id === anchorId && !isPop;
   useScrollToReference(ref, scroll);
 
-  if (anchorId === undefined || isPop) return undefined;
+  if (anchorId === undefined || isPop) {
+    return {
+      ref: undefined,
+      animation: undefined,
+    };
+  }
   return {
+    ref,
     animation: scroll ? 'flash' : 'dim',
   };
 };