From 01b368c11503bb9d5186c020393d7893e8171b05 Mon Sep 17 00:00:00 2001
From: Bruno Bergher <me@brunobergher.comexport>
Date: Tue, 5 Aug 2025 21:40:33 +0100
Subject: [PATCH] Removes unnecessary animations

---
 .../chat/CloudNotificationBanner.tsx          | 18 +--------
 .../CloudNotificationBanner.spec.tsx          | 38 +++----------------
 2 files changed, 7 insertions(+), 49 deletions(-)

diff --git a/webview-ui/src/components/chat/CloudNotificationBanner.tsx b/webview-ui/src/components/chat/CloudNotificationBanner.tsx
index 924ea84af3..0e5f82e414 100644
--- a/webview-ui/src/components/chat/CloudNotificationBanner.tsx
+++ b/webview-ui/src/components/chat/CloudNotificationBanner.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Lightbulb, X } from "lucide-react"
 import { cn } from "@src/lib/utils"
@@ -15,15 +14,9 @@ export const CloudNotificationBanner = ({
 	className,
 }: CloudNotificationBannerProps) => {
 	const { t } = useTranslation()
-	const [isVisible, setIsVisible] = useState(true)
-	const [isAnimating, setIsAnimating] = useState(false)
 
 	const handleDismiss = () => {
-		setIsAnimating(true)
-		setTimeout(() => {
-			setIsVisible(false)
-			onDismiss()
-		}, 200) // Match animation duration
+		onDismiss()
 	}
 
 	const handleClick = () => {
@@ -31,15 +24,8 @@ export const CloudNotificationBanner = ({
 		handleDismiss()
 	}
 
-	if (!isVisible) return null
-
 	return (
-		<div
-			className={cn(
-				"bg-vscode-badge-background relative z-50 transition-all duration-200 ease-in-out",
-				isAnimating ? "opacity-0 transform scale-95" : "opacity-100 transform scale-100",
-				className,
-			)}>
+		<div className={cn("bg-vscode-badge-background relative z-50", className)}>
 			{/* Main notification container with speech bubble */}
 			<div
 				className="relative text-vscode-badge-foreground p-2 rounded-md cursor-pointer transition-colors"
diff --git a/webview-ui/src/components/chat/__tests__/CloudNotificationBanner.spec.tsx b/webview-ui/src/components/chat/__tests__/CloudNotificationBanner.spec.tsx
index c0275d0d8a..55419024c4 100644
--- a/webview-ui/src/components/chat/__tests__/CloudNotificationBanner.spec.tsx
+++ b/webview-ui/src/components/chat/__tests__/CloudNotificationBanner.spec.tsx
@@ -1,6 +1,6 @@
 // npx vitest src/components/chat/__tests__/CloudNotificationBanner.spec.tsx
 
-import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { render, screen, fireEvent } from "@testing-library/react"
 import { vi } from "vitest"
 
 import { CloudNotificationBanner } from "../CloudNotificationBanner"
@@ -58,36 +58,23 @@ describe("CloudNotificationBanner", () => {
 		expect(closeButton).toBeInTheDocument()
 	})
 
-	it("calls onNavigateToAccount and onDismiss when banner is clicked", async () => {
+	it("calls onNavigateToAccount and onDismiss when banner is clicked", () => {
 		render(<CloudNotificationBanner {...defaultProps} />)
 
 		const banner = screen.getByText("This might take a while. Grab a coffee and continue from anywhere with Cloud.")
 		fireEvent.click(banner)
 
 		expect(mockOnNavigateToAccount).toHaveBeenCalledTimes(1)
-
-		// Wait for the animation timeout
-		await waitFor(
-			() => {
-				expect(mockOnDismiss).toHaveBeenCalledTimes(1)
-			},
-			{ timeout: 300 },
-		)
+		expect(mockOnDismiss).toHaveBeenCalledTimes(1)
 	})
 
-	it("calls onDismiss when close button is clicked", async () => {
+	it("calls onDismiss when close button is clicked", () => {
 		render(<CloudNotificationBanner {...defaultProps} />)
 
 		const closeButton = screen.getByRole("button", { name: "Close notification" })
 		fireEvent.click(closeButton)
 
-		// Wait for the animation timeout
-		await waitFor(
-			() => {
-				expect(mockOnDismiss).toHaveBeenCalledTimes(1)
-			},
-			{ timeout: 300 },
-		)
+		expect(mockOnDismiss).toHaveBeenCalledTimes(1)
 	})
 
 	it("does not call onNavigateToAccount when close button is clicked", () => {
@@ -117,19 +104,4 @@ describe("CloudNotificationBanner", () => {
 
 		expect(triangleElement).toBeInTheDocument()
 	})
-
-	it("handles animation states correctly", async () => {
-		const { container } = render(<CloudNotificationBanner {...defaultProps} />)
-
-		const bannerContainer = container.firstChild as HTMLElement
-		expect(bannerContainer).toHaveClass("opacity-100")
-
-		const closeButton = screen.getByRole("button", { name: "Close notification" })
-		fireEvent.click(closeButton)
-
-		// Should start animation
-		await waitFor(() => {
-			expect(bannerContainer).toHaveClass("opacity-0")
-		})
-	})
 })