feat(tags): Improve responsiveness of tag hover effect (#43695)

Improves tag hover performance by updating hover outline to be
controlled by a pseudo element.
Also removes hover debounce (was unnecessary and made hover feel
sluggish sometimes)

static/app/components/group/tagFacets/tagFacetsDistributionMeter.tsx

@@ -66,7 +66,6 @@ function TagFacetsDistributionMeter({
   const multiValueTag = segments.length > 1;
   const [expanded, setExpanded] = useState<boolean>(multiValueTag && !!expandByDefault);
   const [hoveredValue, setHoveredValue] = useState<TagSegment | null>(null);
-  const debounceSetHovered = debounce(value => setHoveredValue(value), 70);
   const topSegments = segments.slice(0, MAX_SEGMENTS);
 
   function renderTitle() {
@@ -130,7 +129,7 @@ function TagFacetsDistributionMeter({
               key={value.value}
               style={{width: pct + '%'}}
               onMouseOver={() => {
-                debounceSetHovered(value);
+                setHoveredValue(value);
                 _debounceTrackHover({
                   tag: title,
                   value: value.value,
@@ -139,7 +138,7 @@ function TagFacetsDistributionMeter({
                   organization,
                 });
               }}
-              onMouseLeave={() => debounceSetHovered(null)}
+              onMouseLeave={() => setHoveredValue(null)}
             >
               {value.isOther ? (
                 <OtherSegment
@@ -188,8 +187,8 @@ function TagFacetsDistributionMeter({
             <li key={`segment-${segment.name}-${index}`}>
               <Link to={segment.url} aria-label={linkLabel}>
                 <LegendRow
-                  onMouseOver={() => debounceSetHovered(segment)}
-                  onMouseLeave={() => debounceSetHovered(null)}
+                  onMouseOver={() => setHoveredValue(segment)}
+                  onMouseLeave={() => setHoveredValue(null)}
                 >
                   <LegendDot color={colors[index]} focus={focus} />
                   <LegendText unfocus={unfocus}>
@@ -327,8 +326,18 @@ const LegendDot = styled('span')<{color: string; focus: boolean}>`
   border-radius: 50%;
   flex-shrink: 0;
   background-color: ${p => p.color};
-  transition: outline 0.3s;
-  ${p => (p.focus ? `outline: ${p.theme.gray100} ${space(0.5)} solid` : null)}
+  &:after {
+    content: '';
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    outline: ${p => p.theme.gray100} ${space(0.5)} solid;
+    opacity: ${p => (p.focus ? '1' : '0')};
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
 `;
 
 const LegendText = styled('span')<{unfocus: boolean}>`