Update screenshot component and tests to reflect changes in loading and error messages

components/domain/screenshot-tooltip.test.tsx

@@ -70,7 +70,7 @@ describe("ScreenshotTooltip", () => {
     );
     // Simulate open by clicking the trigger
     fireEvent.click(screen.getByText("hover me"));
-    expect(screen.getByText(/loading screenshot/i)).toBeInTheDocument();
+    expect(screen.getByText(/taking screenshot/i)).toBeInTheDocument();
   });
 
   it("renders image when loaded", () => {

components/domain/screenshot.test.tsx

@@ -64,7 +64,7 @@ describe("Screenshot", () => {
       isFetching: false,
     });
     render(<Screenshot domain="example.com" />);
-    expect(screen.getByText(/loading screenshot/i)).toBeInTheDocument();
+    expect(screen.getByText(/taking screenshot/i)).toBeInTheDocument();
   });
 
   it("renders image when url present", () => {
@@ -87,6 +87,6 @@ describe("Screenshot", () => {
       isFetching: false,
     });
     render(<Screenshot domain="example.com" />);
-    expect(screen.getByText(/unable to generate/i)).toBeInTheDocument();
+    expect(screen.getByText(/unable to take/i)).toBeInTheDocument();
   });
 });

components/domain/screenshot.tsx

@@ -3,7 +3,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { CircleX } from "lucide-react";
 import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Spinner } from "@/components/ui/spinner";
 import { useTRPC } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
@@ -27,7 +27,7 @@ export function Screenshot({
 }) {
   const trpc = useTRPC();
   const [failedUrl, setFailedUrl] = useState<string | null>(null);
-  const [isLoaded, setIsLoaded] = useState(false);
+
   const { data, isLoading, isFetching } = useQuery(
     trpc.domain.screenshot.queryOptions(
       { domain },
@@ -42,12 +42,6 @@ export function Screenshot({
   const url = data?.url ?? null;
   const loading = isLoading || isFetching;
 
-  // Reset the fade-in state when the image URL changes to animate again
-  // biome-ignore lint/correctness/useExhaustiveDependencies: this is intentional.
-  useEffect(() => {
-    setIsLoaded(false);
-  }, [url]);
-
   return (
     <div className={className}>
       {url && failedUrl !== url ? (
@@ -62,14 +56,11 @@ export function Screenshot({
               "h-auto w-full object-cover",
               aspectClassName,
               imageClassName,
-              "transition-opacity duration-200",
-              isLoaded ? "opacity-100" : "opacity-0",
             )}
             unoptimized
             priority={false}
             draggable={false}
             onError={() => setFailedUrl(url)}
-            onLoad={() => setIsLoaded(true)}
           />
         </a>
       ) : (
@@ -83,12 +74,12 @@ export function Screenshot({
             {loading ? (
               <>
                 <Spinner />
-                <span>Loading screenshot...</span>
+                <span>Taking screenshot...</span>
               </>
             ) : (
               <>
                 <CircleX className="h-4 w-4" />
-                <span>Unable to generate a screenshot.</span>
+                <span>Unable to take a screenshot.</span>
               </>
             )}
           </div>