Improve performance when notification dots are visible on-screen (#2941)

app/components/NotificationDot.module.css

@@ -1,33 +1,42 @@
-.dot {
+.dotWrapper {
 	position: absolute;
 	top: var(--dot-top, -2px);
 	right: var(--dot-right, -2px);
 	width: 8px;
 	height: 8px;
+	pointer-events: none;
+}
+
+.dot {
+	display: block;
+	width: 100%;
+	height: 100%;
+	position: absolute;
 	background-color: var(--color-text-accent);
 	border-radius: 100%;
 	outline: 2px solid var(--color-bg);
-	pointer-events: none;
 }
 
 .pulse {
 	display: block;
-	width: 100%;
-	height: 100%;
-	border-radius: 50%;
+	width: calc(100% + 20px);
+	height: calc(100% + 20px);
+	position: absolute;
+	top: -10px;
+	left: -10px;
+	border-radius: 100%;
 	background-color: var(--color-text-accent);
-	box-shadow: 0 0 0 var(--color-text-accent);
 	animation: pulse 2s infinite;
+	opacity: 0;
 }
 
 @keyframes pulse {
 	from {
-		box-shadow: 0 0 0 0 var(--color-text-accent);
+		transform: scale(0);
+		opacity: 1;
 	}
 	70% {
-		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
-	}
-	to {
-		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+		transform: scale(1);
+		opacity: 0;
 	}
 }

app/components/NotificationDot.tsx

@@ -3,8 +3,9 @@ import styles from "./NotificationDot.module.css";
 
 export function NotificationDot({ className }: { className?: string }) {
 	return (
-		<span className={clsx(styles.dot, className)}>
+		<span className={clsx(styles.dotWrapper, className)}>
 			<span className={styles.pulse} />
+			<span className={styles.dot} />
 		</span>
 	);
 }