fix: better code and design

Author: astandrik

src/components/QueriesActivityBar/QueriesActivityAlert.scss

@@ -14,7 +14,7 @@
     }
 
     &__content {
-        padding: var(--g-spacing-5) var(--g-spacing-4);
+        padding: calc(var(--g-spacing-5) - 1px) var(--g-spacing-4);
     }
 
     &__title {

src/components/QueriesActivityBar/QueriesActivityBar.tsx

@@ -1,7 +1,6 @@
 import {QueriesActivityAlert} from './QueriesActivityAlert';
 import {QueriesActivityExpandable} from './QueriesActivityExpandable';
 import {QueriesActivitySkeleton} from './QueriesActivitySkeleton';
-import {useChartAvailability} from './useChartAvailability';
 import {useQueriesActivityData} from './useQueriesActivityData';
 
 import './QueriesActivityBar.scss';
@@ -11,10 +10,7 @@ interface QueriesActivityBarProps {
 }
 
 export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
-    // Check chart availability without rendering hidden components
-    const areChartsAvailable = useChartAvailability(tenantName);
-
-    const {runningQueriesCount, uniqueApplications, uniqueUsers, qps, latency} =
+    const {runningQueriesCount, uniqueApplications, uniqueUsers, qps, latency, areChartsAvailable} =
         useQueriesActivityData(tenantName);
 
     // Show skeleton while determining chart availability

src/components/QueriesActivityBar/useChartAvailability.ts

@@ -18,6 +18,7 @@ interface UseQueriesActivityDataResult {
     uniqueUsers: number;
     qps: ReturnType<typeof calculateQueriesPerSecond>;
     latency: ReturnType<typeof calculateLatency>;
+    areChartsAvailable: boolean | null; // null = loading, boolean = result
 }
 
 export function useQueriesActivityData(tenantName: string): UseQueriesActivityDataResult {
@@ -33,7 +34,11 @@ export function useQueriesActivityData(tenantName: string): UseQueriesActivityDa
         {pollingInterval: shouldRefresh},
     );
 
-    const {data: queriesPerSecData} = chartApi.useGetChartDataQuery(
+    const {
+        data: queriesPerSecData,
+        isSuccess: queriesSuccess,
+        isError: queriesError,
+    } = chartApi.useGetChartDataQuery(
         {
             database: tenantName,
             metrics: [{target: 'queries.requests'}],
@@ -55,6 +60,17 @@ export function useQueriesActivityData(tenantName: string): UseQueriesActivityDa
 
     const runningQueriesCount = runningQueriesData?.resultSets?.[0]?.result?.length || 0;
 
+    // Determine chart availability from queries API success/error state
+    const areChartsAvailable = React.useMemo(() => {
+        if (queriesSuccess) {
+            return true;
+        }
+        if (queriesError) {
+            return false;
+        }
+        return null; // Still loading
+    }, [queriesSuccess, queriesError]);
+
     const qps = React.useMemo(
         () => calculateQueriesPerSecond(queriesPerSecData?.metrics?.[0]?.data),
         [queriesPerSecData?.metrics?.[0]?.data],
@@ -91,5 +107,6 @@ export function useQueriesActivityData(tenantName: string): UseQueriesActivityDa
         uniqueUsers,
         qps,
         latency,
+        areChartsAvailable,
     };
 }

src/components/QueriesActivityBar/useQueriesActivityData.ts

@@ -4,7 +4,7 @@
 
     &__skeleton {
         width: 100%;
-        height: 60px;
+        height: 62px;
     }
 
     &__alert-message {