feat(telemetry): EmptyState component (#1264)

Saw that we created an empty state in Tracelist, so just made that empty
state generic and applied on every page.

2 variants
 - Simple - one-liner simple empty state
 - full - with title, description

---------

Co-authored-by: mathuraditya724 <mathuraditya724@gmail.com>

Author: Shubhdeep12

packages/spotlight/src/ui/telemetry/components/events/EventDetails.tsx

@@ -4,6 +4,7 @@ import type { SentryErrorEvent, SentryEvent } from "../../types";
 import { isErrorEvent } from "../../utils/sentry";
 import { createTab } from "../../utils/tabs";
 import TelemetryTabs from "../TelemetryTabs";
+import EmptyState from "../shared/EmptyState";
 import PlatformIcon from "../shared/PlatformIcon";
 import AICopyButton from "./AICopyButton";
 import Event, { EventTitle } from "./Event";
@@ -19,13 +20,13 @@ export default function EventDetails() {
   const getEventById = useSentryStore(state => state.getEventById);
 
   if (!eventId) {
-    return <p className="text-primary-300 p-6">Unknown event id</p>;
+    return <EmptyState description="Unknown event id." />;
   }
 
   const event = getEventById(eventId);
 
   if (!event) {
-    return <p className="text-primary-300 p-6">Event not found.</p>;
+    return <EmptyState description="Event not found." />;
   }
 
   const tabs = [

packages/spotlight/src/ui/telemetry/components/events/EventList.tsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { useSentryEvents } from "../../data/useSentryEvents";
 import { isErrorEvent } from "../../utils/sentry";
 import { truncateId } from "../../utils/text";
+import EmptyState from "../shared/EmptyState";
 import PlatformIcon from "../shared/PlatformIcon";
 import { EventSummary } from "./Event";
 
@@ -39,6 +40,16 @@ export default function EventList({ traceId }: { traceId?: string }) {
       })}
     </CardList>
   ) : (
-    <div className="text-primary-300 p-6">Looks like there's no events recorded matching this query. 🤔</div>
+    <EmptyState
+      variant={!traceId ? "full" : "simple"}
+      className={!traceId ? "h-full" : undefined}
+      title={!traceId ? "No Errors" : undefined}
+      description={
+        !traceId
+          ? "No errors captured yet. That's either very good news or your SDK isn't set up."
+          : "No errors in this trace."
+      }
+      showDocsLink={!traceId}
+    />
   );
 }

packages/spotlight/src/ui/telemetry/components/insights/Profiles.tsx

@@ -8,6 +8,7 @@ import useSort from "../../hooks/useSort";
 import useSentryStore from "../../store";
 import type { AggregateCallData } from "../../types";
 import { getFormattedDuration, getSpanDurationClassName } from "../../utils/duration";
+import EmptyState from "../shared/EmptyState";
 import { TimeBar } from "../shared/TimeBar";
 
 type AggregateCallProfileComparator = (a: AggregateCallData, b: AggregateCallData) => number;
@@ -38,7 +39,15 @@ function Profiles() {
   }, [sort]);
 
   if (!aggregateCallData.length) {
-    return <p className="text-primary-300 px-6 py-4">No profiles found.</p>;
+    return (
+      <EmptyState
+        variant="full"
+        className="h-full"
+        title="No Profiles"
+        description="No profiles recorded. Enable profiling in your Sentry SDK to see function-level performance."
+        showDocsLink
+      />
+    );
   }
 
   // Calculate max time for bar visualization (100%, scaling form here)

packages/spotlight/src/ui/telemetry/components/insights/Queries.tsx

@@ -10,6 +10,7 @@ import { getFormattedDuration, getSpanDurationClassName } from "@spotlight/ui/te
 import Table from "@spotlight/ui/ui/table";
 import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
+import EmptyState from "../shared/EmptyState";
 
 type QueryInfo = {
   avgDuration: number;
@@ -67,9 +68,13 @@ const Queries = () => {
 
   if (!queriesData?.length) {
     return (
-      <p className="text-primary-300 px-6 py-4">
-        No Database queries found. Add integration in Sentry initialization to track Database queries.
-      </p>
+      <EmptyState
+        variant="full"
+        className="h-full"
+        title="No Database Queries"
+        description="No queries captured. Add a database integration to your Sentry setup to track them."
+        showDocsLink
+      />
     );
   }
 

packages/spotlight/src/ui/telemetry/components/insights/QuerySummary.tsx

@@ -12,6 +12,7 @@ import useSort from "../../hooks/useSort";
 import type { Span } from "../../types";
 import { getFormattedDuration, getSpanDurationClassName } from "../../utils/duration";
 import { truncateId } from "../../utils/text";
+import EmptyState from "../shared/EmptyState";
 import { TimeBar } from "../shared/TimeBar";
 
 type SpanInfoComparator = (a: Span, b: Span) => number;
@@ -53,7 +54,7 @@ const QuerySummary = () => {
   }, [allSpans, sort, decodedType]);
 
   if (!filteredDBSpans || !filteredDBSpans.length) {
-    return <p className="text-primary-300 px-6 py-4">Query not found.</p>;
+    return <EmptyState description="Query not found." />;
   }
 
   const maxTime = Math.max(...filteredDBSpans.map(dbSpan => dbSpan.timestamp - dbSpan.start_timestamp));

packages/spotlight/src/ui/telemetry/components/insights/Resources.tsx

@@ -9,6 +9,7 @@ import useSort from "../../hooks/useSort";
 import type { Span } from "../../types";
 import { formatBytes } from "../../utils/bytes";
 import { getFormattedDuration, getSpanDurationClassName } from "../../utils/duration";
+import EmptyState from "../shared/EmptyState";
 
 type ResourceInfo = {
   avgDuration: number;
@@ -87,7 +88,15 @@ const Resources = () => {
   }, [sort, allSpans]);
 
   if (!resources?.length) {
-    return <p className="text-primary-300 px-6 py-4">No Resource found.</p>;
+    return (
+      <EmptyState
+        variant="full"
+        className="h-full"
+        title="No Resources"
+        description="No resources tracked. Enable browser tracing to see asset loading performance."
+        showDocsLink
+      />
+    );
   }
   return (
     <Table variant="detail">

packages/spotlight/src/ui/telemetry/components/insights/aiTraces/AITraceList.tsx

@@ -10,6 +10,7 @@ import { SearchProvider } from "../../../context/SearchContext";
 import { useSpotlightAITraces } from "../../../data/useSpotlightAITraces";
 import useSort from "../../../hooks/useSort";
 import useSentryStore from "../../../store";
+import EmptyState from "../../shared/EmptyState";
 import AITraceDetail from "./AITraceDetails";
 import AITraceItem from "./AITraceItem";
 
@@ -51,7 +52,15 @@ export default function AITraceList() {
   const selectedRawSpan = spanId ? traceContext?.spans.get(spanId) : null;
 
   if (spotlightAITraces.length === 0) {
-    return <div className="text-primary-300 p-6">No AI traces have been recorded yet. 🤔</div>;
+    return (
+      <EmptyState
+        variant="full"
+        className="h-full"
+        title="No AI Traces"
+        description="No AI traces recorded. Instrument your LLM calls with Sentry to see them here."
+        showDocsLink
+      />
+    );
   }
 
   const handleTraceClick = (trace: SpotlightAITrace) => {

packages/spotlight/src/ui/telemetry/components/insights/index.tsx

@@ -12,7 +12,7 @@ import WebVitalsDetail from "./webVitals/WebVitalsDetail";
 export default function InsightsTabDetails() {
   return (
     <>
-      <div className="flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto">
+      <div className="flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto h-full">
         <Routes>
           <Route path="queries" element={<Queries />} />
           <Route path="queries/:type" element={<QuerySummary />} />

packages/spotlight/src/ui/telemetry/components/insights/sdks/SdkList.tsx

@@ -2,6 +2,7 @@ import CardList from "@spotlight/ui/telemetry/components/shared/CardList";
 import TimeSince from "@spotlight/ui/telemetry/components/shared/TimeSince";
 import { useSentrySdks } from "@spotlight/ui/telemetry/data/useSentrySdks";
 import { sdkToPlatform } from "@spotlight/ui/telemetry/utils/sdkToPlatform";
+import EmptyState from "../../shared/EmptyState";
 import PlatformIcon from "../../shared/PlatformIcon";
 
 export default function SdkList() {
@@ -24,7 +25,13 @@ export default function SdkList() {
           ))}
         </CardList>
       ) : (
-        <div className="text-primary-300 px-6 py-4">Looks like there's no SDKs that have reported yet. 🤔</div>
+        <EmptyState
+          variant="full"
+          className="h-full"
+          title="No SDKs"
+          description="No SDKs detected yet. Once Sentry sends data, we'll show what's running."
+          showDocsLink
+        />
       )}
     </>
   );

packages/spotlight/src/ui/telemetry/components/insights/webVitals/WebVitalsDetail.tsx

@@ -9,12 +9,13 @@ import { getFormattedDuration } from "@spotlight/ui/telemetry/utils/duration";
 import Breadcrumbs from "@spotlight/ui/ui/breadcrumbs";
 import { useParams } from "react-router-dom";
 import { normalizePerformanceScore } from "../../../utils/webVitals";
+import EmptyState from "../../shared/EmptyState";
 import PerformanceChart from "./PerformanceChart";
 
 const WebVitalsDetail = () => {
   const events = useSentryEvents();
   const { page } = useParams();
-  
+
   let measurementEvent: SentryEventWithPerformanceData | undefined;
   for (const event of events) {
     if (event.event_id === page && event.measurements && event?.contexts?.trace?.op === "pageload") {
@@ -118,7 +119,7 @@ const WebVitalsDetail = () => {
       </>
     );
   }
-  return <p className="text-primary-300 px-6 py-4">No measurement found.</p>;
+  return <EmptyState description="No measurement found." />;
 };
 
 export default WebVitalsDetail;