From 214c9e013cac9d81b06011394ba22d2af4a0aadb Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Thu, 2 Apr 2026 18:35:11 +0100
Subject: [PATCH] feat: enhance empty state visualization in TracesDashboard
 with improved SVG graphics

---
 .../src/Components/Traces/TracesDashboard.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/App/FeatureSet/Dashboard/src/Components/Traces/TracesDashboard.tsx b/App/FeatureSet/Dashboard/src/Components/Traces/TracesDashboard.tsx
index b2c7fd64e1..a8c50aba47 100644
--- a/App/FeatureSet/Dashboard/src/Components/Traces/TracesDashboard.tsx
+++ b/App/FeatureSet/Dashboard/src/Components/Traces/TracesDashboard.tsx
@@ -295,19 +295,20 @@ const TracesDashboard: FunctionComponent = (): ReactElement => {
   if (serviceSummaries.length === 0) {
     return (
       <div className="rounded-lg border border-gray-200 bg-white p-12 text-center">
-        <div className="text-gray-400 text-5xl mb-4">
+        <div className="mb-4">
           <svg
-            className="mx-auto h-12 w-12"
+            className="mx-auto h-16 w-16 text-indigo-200"
             fill="none"
-            viewBox="0 0 24 24"
+            viewBox="0 0 48 48"
             stroke="currentColor"
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1.5}
-              d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
-            />
+            {/* Three horizontal bars representing a waterfall/trace timeline */}
+            <rect x="4" y="10" width="28" height="5" rx="2.5" strokeWidth={1.5} fill="currentColor" opacity={0.5} />
+            <rect x="12" y="20" width="20" height="5" rx="2.5" strokeWidth={1.5} fill="currentColor" opacity={0.7} />
+            <rect x="20" y="30" width="24" height="5" rx="2.5" strokeWidth={1.5} fill="currentColor" opacity={0.9} />
+            {/* Connecting lines */}
+            <path d="M18 15 L16 20" strokeWidth={1.5} opacity={0.4} />
+            <path d="M22 25 L24 30" strokeWidth={1.5} opacity={0.4} />
           </svg>
         </div>
         <h3 className="text-lg font-medium text-gray-900 mb-2">