From ac21ceebd4807acb57e1ade412a6e844681e6239 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Fri, 16 Aug 2024 22:14:30 +0900
Subject: [PATCH] fix(app): fix clicking the gear icon several times in a short
 period of time (#16031)

* fix(app): fix clicking the gear icon several times in a short period of time
---
 app/src/App/Navbar.tsx | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
index 5d162a110f4..eaea2575836 100644
--- a/app/src/App/Navbar.tsx
+++ b/app/src/App/Navbar.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
+import debounce from 'lodash/debounce'
 
 import {
   ALIGN_CENTER,
@@ -14,7 +15,6 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   JUSTIFY_SPACE_EVENLY,
   Link,
-  SIZE_2,
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
@@ -29,6 +29,7 @@ import type { RouteProps } from './types'
 
 const SALESFORCE_HELP_LINK = 'https://support.opentrons.com/s/'
 const PROJECT: string = _OPENTRONS_PROJECT_
+const DEBOUNCE_DURATION_MS = 300
 
 const NavbarLink = styled(NavLink)`
   color: ${COLORS.white};
@@ -61,7 +62,7 @@ const NavbarLink = styled(NavLink)`
     background-color: ${COLORS.black90};
   }
 `
-const NavIconLink = styled(NavLink)`
+const NavIconLink = styled(Link)`
   &.active > svg {
     color: ${COLORS.grey30};
     background-color: ${COLORS.black70};
@@ -75,8 +76,8 @@ const IconLink = styled(Link)`
 `
 
 const NavbarIcon = styled(Icon)`
-  width: ${SIZE_2};
-  height: ${SIZE_2};
+  width: 2rem;
+  height: 2rem;
   padding: ${SPACING.spacing6};
   border-radius: 50%;
   color: ${COLORS.grey30};
@@ -109,9 +110,18 @@ const LogoImg = styled('img')`
 `
 
 export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
+  const navigate = useNavigate()
   const navRoutes = routes.filter(
     ({ navLinkTo }: RouteProps) => navLinkTo != null
   )
+
+  const debouncedNavigate = React.useCallback(
+    debounce((path: string) => {
+      navigate(path)
+    }, DEBOUNCE_DURATION_MS),
+    [navigate]
+  )
+
   return (
     <Flex
       backgroundColor={COLORS.black90}
@@ -148,7 +158,14 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
         alignSelf={ALIGN_STRETCH}
         justifyContent={JUSTIFY_SPACE_EVENLY}
       >
-        <NavIconLink data-testid="Navbar_settingsLink" to="/app-settings">
+        <NavIconLink
+          role="button"
+          data-testid="Navbar_settingsLink"
+          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+            e.preventDefault()
+            debouncedNavigate('/app-settings')
+          }}
+        >
           <NavbarIcon name="gear" />
         </NavIconLink>
         <IconLink href={SALESFORCE_HELP_LINK} external>