Fix flaky load of spans table

Signed-off-by: Shenoy Pratik <[email protected]>
opensearch-project · Nov 26, 2024 · d38a29d · d38a29d
1 parent 55f1907
commit d38a29d
Showing 1 changed file with 16 additions and 14 deletions.
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
@@ -488,20 +488,22 @@ export function ServiceView(props: ServiceViewProps) {
   }, [spanFilters]);
 
   const [total, setTotal] = useState(0);
-  const spanDetailTable = useMemo(
-    () => (
-      <SpanDetailTable
-        http={props.http}
-        hiddenColumns={['serviceName']}
-        DSL={DSL}
-        openFlyout={(spanId: string) => setCurrentSpan(spanId)}
-        setTotal={setTotal}
-        mode={mode}
-        dataSourceMDSId={props.dataSourceMDSId[0].id}
-      />
-    ),
-    [DSL, setCurrentSpan, spanFilters]
-  );
+  const spanDetailTable = useMemo(() => {
+    // only render when time and service state updates in DSL
+    if (Object.keys(DSL).length > 0)
+      return (
+        <SpanDetailTable
+          http={props.http}
+          hiddenColumns={['serviceName']}
+          DSL={DSL}
+          openFlyout={(spanId: string) => setCurrentSpan(spanId)}
+          setTotal={setTotal}
+          mode={mode}
+          dataSourceMDSId={props.dataSourceMDSId[0].id}
+        />
+      );
+    return <></>;
+  }, [DSL, setCurrentSpan, spanFilters]);
 
   const pageToRender = (
     <>