perf(app-board): remove style recalculation spike

packages/game-app/src/_shared/components/Card/Card.tsx

@@ -37,9 +37,6 @@ const CardComponent: React.FC<CardProps> = ({
   return (
     <CardWrapper dragging={dragging} bigger={bigger}>
       <CardHeader type={type}>
-        <PatternContainer>
-          <PipePattern />
-        </PatternContainer>
         <CardHeading>{type}</CardHeading>
         <CardHeadingTags>
           {tags?.map(t => (

packages/game-app/src/gameView/components/ConnectedCard/ConnectedCard.tsx

@@ -17,4 +17,4 @@ const ConnectedCard: React.FC<Props> = ({ id, dragging, bigger }) => {
 
 ConnectedCard.displayName = 'ConnectedCard';
 
-export default ConnectedCard;
+export default React.memo(ConnectedCard);

packages/game-app/src/gameView/components/DraggableCard/DraggableCard.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDraggable } from '@dnd-kit/core';
 import { useDispatch, useSelector } from 'react-redux';
 import { actions, selectors } from '../../slice';
@@ -79,18 +79,30 @@ const DraggableCard: React.FC<Props> = ({ id, bigger }) => {
     }
   }, [heldBySomeoneElse, animating]);
 
+  const card = useMemo(() => {
+    return <ConnectedCard bigger={bigger} id={id} />;
+  }, [bigger, id]);
+
+  const estimations = useMemo(() => {
+    return (
+      <>
+        {estimationOpen && <EstimationEditor saveEstimation={saveEstimation} initialEstimation={estimation} />}
+        {!estimationOpen && estimation && <EstimationInCard moving={isCardMoving} estimation={estimation} />}
+      </>
+    );
+  }, [estimation, estimationOpen, isCardMoving, saveEstimation]);
+
   return (
     <div style={style} data-cy={`card-${id}`}>
-      {estimationOpen && <EstimationEditor saveEstimation={saveEstimation} initialEstimation={estimation} />}
-      {!estimationOpen && estimation && <EstimationInCard moving={isCardMoving} estimation={estimation} />}
+      {estimations}
       <CardWrapper
         ref={setNodeRef}
         {...listeners}
         onPointerDown={onPointerDown}
         {...attributes}
         isDragging={isCardMoving}
       >
-        <ConnectedCard bigger={bigger} id={id} />
+        {card}
       </CardWrapper>
     </div>
   );