feat: Enhance loading states in dashboard components with improved visibility and initial load handling

App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx

@@ -140,8 +140,8 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
     props.component.arguments.metricQueryConfigs,
   ]);
 
-  if (isLoading) {
-    // Skeleton loading for chart
+  if (isLoading && metricResults.length === 0) {
+    // Skeleton loading for chart - only on initial load
     return (
       <div className="w-full h-full flex flex-col p-1 animate-pulse">
         <div className="h-3 w-28 bg-gray-100 rounded mb-3"></div>
@@ -241,7 +241,13 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
   };
 
   return (
-    <div className="w-full h-full overflow-hidden">
+    <div
+      className="w-full h-full overflow-hidden"
+      style={{
+        opacity: isLoading ? 0.5 : 1,
+        transition: "opacity 0.2s ease-in-out",
+      }}
+    >
       <MetricCharts
         metricResults={metricResults}
         metricTypes={props.metricTypes}

App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardGaugeComponent.tsx

@@ -111,8 +111,8 @@ const DashboardGaugeComponentElement: FunctionComponent<ComponentProps> = (
     }
   }, [props.component.arguments.metricQueryConfig]);
 
-  if (isLoading) {
-    // Skeleton loading for gauge
+  if (isLoading && metricResults.length === 0) {
+    // Skeleton loading for gauge - only on initial load
     return (
       <div className="w-full h-full flex flex-col items-center justify-center animate-pulse">
         <div className="h-3 w-20 bg-gray-100 rounded mb-3"></div>
@@ -318,7 +318,13 @@ const DashboardGaugeComponentElement: FunctionComponent<ComponentProps> = (
   const percentDisplay: number = Math.round(percentage * 100);
 
   return (
-    <div className="w-full text-center h-full flex flex-col items-center justify-center">
+    <div
+      className="w-full text-center h-full flex flex-col items-center justify-center"
+      style={{
+        opacity: isLoading ? 0.5 : 1,
+        transition: "opacity 0.2s ease-in-out",
+      }}
+    >
       {props.component.arguments.gaugeTitle && (
         <div
           style={{

App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardLogStreamComponent.tsx

@@ -168,7 +168,7 @@ const DashboardLogStreamComponentElement: FunctionComponent<ComponentProps> = (
     props.component.arguments.maxRows,
   ]);
 
-  if (isLoading) {
+  if (isLoading && logs.length === 0) {
     return (
       <div className="h-full flex flex-col animate-pulse">
         <div className="h-3 w-24 bg-gray-100 rounded mb-3"></div>
@@ -208,7 +208,13 @@ const DashboardLogStreamComponentElement: FunctionComponent<ComponentProps> = (
   }
 
   return (
-    <div className="h-full overflow-auto flex flex-col">
+    <div
+      className="h-full overflow-auto flex flex-col"
+      style={{
+        opacity: isLoading ? 0.5 : 1,
+        transition: "opacity 0.2s ease-in-out",
+      }}
+    >
       {props.component.arguments.title && (
         <div className="flex items-center justify-between mb-2 px-1">
           <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">

App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardTableComponent.tsx

@@ -112,8 +112,8 @@ const DashboardTableComponentElement: FunctionComponent<ComponentProps> = (
     }
   }, [props.component.arguments.metricQueryConfig]);
 
-  if (isLoading) {
-    // Skeleton loading for table
+  if (isLoading && metricResults.length === 0) {
+    // Skeleton loading for table - only on initial load
     return (
       <div className="h-full flex flex-col animate-pulse">
         <div className="h-3 w-24 bg-gray-100 rounded mb-3"></div>
@@ -174,7 +174,13 @@ const DashboardTableComponentElement: FunctionComponent<ComponentProps> = (
       : 1;
 
   return (
-    <div className="h-full overflow-auto flex flex-col">
+    <div
+      className="h-full overflow-auto flex flex-col"
+      style={{
+        opacity: isLoading ? 0.5 : 1,
+        transition: "opacity 0.2s ease-in-out",
+      }}
+    >
       {props.component.arguments.tableTitle && (
         <div className="flex items-center justify-between mb-2 px-1">
           <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">

App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardTraceListComponent.tsx

@@ -150,7 +150,7 @@ const DashboardTraceListComponentElement: FunctionComponent<ComponentProps> = (
     props.component.arguments.maxRows,
   ]);
 
-  if (isLoading) {
+  if (isLoading && spans.length === 0) {
     return (
       <div className="h-full flex flex-col animate-pulse">
         <div className="h-3 w-24 bg-gray-100 rounded mb-3"></div>
@@ -192,7 +192,13 @@ const DashboardTraceListComponentElement: FunctionComponent<ComponentProps> = (
   }
 
   return (
-    <div className="h-full overflow-auto flex flex-col">
+    <div
+      className="h-full overflow-auto flex flex-col"
+      style={{
+        opacity: isLoading ? 0.5 : 1,
+        transition: "opacity 0.2s ease-in-out",
+      }}
+    >
       {props.component.arguments.title && (
         <div className="flex items-center justify-between mb-2 px-1">
           <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">

App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx

@@ -177,8 +177,8 @@ const DashboardValueComponentElement: FunctionComponent<ComponentProps> = (
     }
   }, [props.component.arguments.metricQueryConfig]);
 
-  if (isLoading) {
-    // Skeleton loading state
+  if (isLoading && metricResults.length === 0) {
+    // Skeleton loading state - only on initial load
     return (
       <div className="w-full h-full flex flex-col items-center justify-center rounded-md animate-pulse">
         <div className="h-3 w-16 bg-gray-100 rounded mb-3"></div>
@@ -359,7 +359,11 @@ const DashboardValueComponentElement: FunctionComponent<ComponentProps> = (
   return (
     <div
       className="w-full h-full flex flex-col items-center justify-center rounded-md relative overflow-hidden"
-      style={bgStyle}
+      style={{
+        ...bgStyle,
+        opacity: isLoading ? 0.5 : 1,
+        transition: "opacity 0.2s ease-in-out",
+      }}
     >
       {/* Title */}
       <div className="flex items-center gap-1.5 mb-0.5">