feat(replay): Use SDK value for LCP

Changes LCP breadcrumb rendering to use `data.value` instead of trying to calculate the value (which ends up resulting in incorrect values as it uses the replay start timestamp, so LCP from a refresh will be wrong).

Related getsentry/sentry-javascript#7225

static/app/components/replays/breadcrumbs/utils.tsx

@@ -3,12 +3,12 @@ import {BreadcrumbType, Crumb} from 'sentry/types/breadcrumbs';
 /**
  * Generate breadcrumb descriptions based on type
  */
-export function getDescription(crumb: Crumb, startTimestampMs?: number) {
+export function getDescription(crumb: Crumb) {
   if (typeof crumb.data === 'object' && crumb.data !== null && 'action' in crumb.data) {
     switch (crumb.data.action) {
       case 'largest-contentful-paint':
-        if (crumb.timestamp && startTimestampMs) {
-          return `${new Date(crumb.timestamp).getTime() - startTimestampMs}ms`;
+        if (crumb.data?.value !== undefined) {
+          return `${crumb.data.value}ms`;
         }
         break;
       default:
@@ -50,6 +50,6 @@ export function getTitle(crumb: Crumb) {
 /**
  * Generate breadcrumb title + descriptions
  */
-export function getDetails(crumb: Crumb, startTimestampMs?: number) {
-  return {title: getTitle(crumb), description: getDescription(crumb, startTimestampMs)};
+export function getDetails(crumb: Crumb) {
+  return {title: getTitle(crumb), description: getDescription(crumb)};
 }

static/app/views/replays/detail/breadcrumbs/breadcrumbItem.tsx

@@ -32,7 +32,7 @@ function BreadcrumbItem({
   onMouseLeave,
   onClick,
 }: Props) {
-  const {title, description} = getDetails(crumb, startTimestampMs);
+  const {title, description} = getDetails(crumb);
 
   const handleMouseEnter = useCallback(
     (e: React.MouseEvent<HTMLElement>) => onMouseEnter && onMouseEnter(crumb, e),