feat(starfish): Add VCD measurement to Starfish spans table component
diff --git a/static/app/views/starfish/views/spans/spansTable.tsx b/static/app/views/starfish/views/spans/spansTable.tsx
index 83d0e633e26f2..e522f8b9408e8 100644
--- a/static/app/views/starfish/views/spans/spansTable.tsx
+++ b/static/app/views/starfish/views/spans/spansTable.tsx
@@ -13,6 +13,7 @@ import {Organization} from 'sentry/types';
 import {EventsMetaType} from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import type {Sort} from 'sentry/utils/discover/fields';
+import {VisuallyCompleteWithData} from 'sentry/utils/performanceForSentry';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -98,24 +99,30 @@ export default function SpansTable({
 
   return (
     <Fragment>
-      <GridEditable
+      <VisuallyCompleteWithData
+        id="SpansTable"
+        hasData={data.length > 0}
         isLoading={isLoading}
-        data={data as Row[]}
-        columnOrder={columnOrder ?? getColumns(moduleName)}
-        columnSortBy={[
-          {
-            key: sort.field,
-            order: sort.kind,
-          },
-        ]}
-        grid={{
-          renderHeadCell: column => renderHeadCell({column, sort, location}),
-          renderBodyCell: (column, row) =>
-            renderBodyCell(column, row, meta, location, organization, endpoint, method),
-        }}
-        location={location}
-      />
-      <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
+      >
+        <GridEditable
+          isLoading={isLoading}
+          data={data as Row[]}
+          columnOrder={columnOrder ?? getColumns(moduleName)}
+          columnSortBy={[
+            {
+              key: sort.field,
+              order: sort.kind,
+            },
+          ]}
+          grid={{
+            renderHeadCell: column => renderHeadCell({column, sort, location}),
+            renderBodyCell: (column, row) =>
+              renderBodyCell(column, row, meta, location, organization, endpoint, method),
+          }}
+          location={location}
+        />
+        <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
+      </VisuallyCompleteWithData>
     </Fragment>
   );
 }

The component fetches its own data (for now), so I wanted to add some measurements here. I think there's a good chance the data loading strategy will change soon, but this is a start.
