Update MetricElement.tsx

apps/web/src/components/ui/report/elements/MetricElement/MetricElement.tsx

@@ -6,50 +6,18 @@ import { MetricEmbedPlaceholder } from './MetricPlaceholder';
 import { Caption, CaptionTextarea } from '../CaptionNode';
 import { mediaResizeHandleVariants, Resizable, ResizeHandle } from '../ResizeHandle';
 import { type TMetricElement } from '../../plugins/metric-plugin';
+import React from 'react';
 
 type MetricElementProps = PlateElementProps<TMetricElement>;
 
 export const MetricElement = withHOC(
   ResizableProvider,
   function MetricElement({ children, ...props }: MetricElementProps) {
-    const width = useResizableValue('width');
-    const align = 'center'; // Default align for metrics
     const metricId = props.element.metricId;
 
     const { attributes, ...elementProps } = props;
 
-    const content = metricId ? (
+    const content = metricId ? <MetricContent metricId={metricId} /> : <MetricEmbedPlaceholder />;
-      <figure className="group relative m-0 w-full cursor-default" contentEditable={false}>
-        <Resizable
-          align={align}
-          options={{
-            align,
-            maxWidth: '100%',
-            minWidth: 200
-          }}>
-          <ResizeHandle
-            className={mediaResizeHandleVariants({ direction: 'left' })}
-            options={{ direction: 'left' }}
-          />
-
-          {/* Metric content placeholder - replace with actual metric rendering */}
-          <div className="min-h-40 rounded bg-red-100 p-4">
-            <div className="text-sm text-red-500">Metric: {metricId}</div>
-          </div>
-
-          <ResizeHandle
-            className={mediaResizeHandleVariants({ direction: 'right' })}
-            options={{ direction: 'right' }}
-          />
-        </Resizable>
-
-        <Caption style={{ width }} align={align}>
-          <CaptionTextarea placeholder="Write a caption..." />
-        </Caption>
-      </figure>
-    ) : (
-      <MetricEmbedPlaceholder />
-    );
 
     return (
       <PlateElement
@@ -64,3 +32,38 @@ export const MetricElement = withHOC(
     );
   }
 );
+
+const MetricContent = React.memo(({ metricId }: { metricId: string }) => {
+  const width = useResizableValue('width');
+  const align = 'center'; // Default align for metrics
+  return (
+    <figure className="group relative m-0 w-full cursor-default" contentEditable={false}>
+      <Resizable
+        align={align}
+        options={{
+          align,
+          maxWidth: '100%',
+          minWidth: 350
+        }}>
+        <ResizeHandle
+          className={mediaResizeHandleVariants({ direction: 'left' })}
+          options={{ direction: 'left' }}
+        />
+
+        {/* Metric content placeholder - replace with actual metric rendering */}
+        <div className="min-h-60 rounded bg-red-100 p-4">
+          <div className="text-sm text-red-500">Metric: {metricId}</div>
+        </div>
+
+        <ResizeHandle
+          className={mediaResizeHandleVariants({ direction: 'right' })}
+          options={{ direction: 'right' }}
+        />
+      </Resizable>
+
+      <Caption style={{ width }} align={align}>
+        <CaptionTextarea placeholder="Write a caption..." />
+      </Caption>
+    </figure>
+  );
+});