refactor: improve memoisation on table rows

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -1,7 +1,7 @@
 import { Table, flexRender } from '@tanstack/react-table';
 import { EntryId, OntimeEntry, RGBColour, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
-import { CSSProperties, useMemo } from 'react';
+import { CSSProperties, memo, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
@@ -30,7 +30,8 @@ interface EventRowProps {
   hasCursor?: boolean;
 }
 
-export default function EventRow({
+export default memo(EventRow);
+function EventRow({
   rowId,
   id,
   eventIndex,
@@ -55,24 +56,25 @@ export default function EventRow({
 
   const openMenu = useCuesheetTableMenu((store) => store.openMenu);
 
-  const { color, backgroundColor } = getAccessibleColour(colour);
-  const tmpColour = cssOrHexToColour(color) as RGBColour; // we know this to be a correct colour
-  const mutedText = colourToHex({ ...tmpColour, alpha: tmpColour.alpha * 0.8 });
+  const { rowBgColour, backgroundColor, mutedText } = useMemo(() => {
+    const accessible = getAccessibleColour(colour);
+    const tmpColour = cssOrHexToColour(accessible.color) as RGBColour;
 
-  const rowBgColour: string | undefined = useMemo(() => {
+    let rowBgColour: string | undefined;
     if (isLoaded) {
-      return '#087A27'; // $active-green
+      rowBgColour = '#087A27'; // $active-green
     } else if (colour) {
-      // the colour is user defined and might be invalid
-      const accessibleBackgroundColor = cssOrHexToColour(getAccessibleColour(colour).backgroundColor);
-      if (accessibleBackgroundColor !== null) {
-        return colourToHex({
-          ...accessibleBackgroundColor,
-          alpha: accessibleBackgroundColor.alpha * 0.25,
-        });
+      const accessibleBg = cssOrHexToColour(accessible.backgroundColor);
+      if (accessibleBg !== null) {
+        rowBgColour = colourToHex({ ...accessibleBg, alpha: accessibleBg.alpha * 0.25 });
       }
     }
-    return;
+
+    return {
+      rowBgColour,
+      backgroundColor: accessible.backgroundColor,
+      mutedText: colourToHex({ ...tmpColour, alpha: tmpColour.alpha * 0.8 }),
+    };
   }, [colour, isLoaded]);
 
   return (

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.tsx

@@ -1,6 +1,6 @@
 import { Table, flexRender } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
-import { CSSProperties } from 'react';
+import { CSSProperties, memo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
@@ -20,7 +20,8 @@ interface GroupRowProps {
   hasCursor?: boolean;
 }
 
-export default function GroupRow({
+export default memo(GroupRow);
+function GroupRow({
   groupId,
   colour,
   rowId,

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx

@@ -1,7 +1,7 @@
 import { Table, flexRender } from '@tanstack/react-table';
 import { EntryId, SupportedEntry } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
-import { CSSProperties } from 'react';
+import { CSSProperties, memo, useMemo } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
@@ -25,7 +25,8 @@ interface MilestoneRowProps {
   hasCursor?: boolean;
 }
 
-export default function MilestoneRow({
+export default memo(MilestoneRow);
+function MilestoneRow({
   entryId,
   isPast,
   parentBgColour,
@@ -45,17 +46,12 @@ export default function MilestoneRow({
 
   const openMenu = useCuesheetTableMenu((store) => store.openMenu);
 
-  let rowBgColour: string | undefined;
-  if (colour) {
-    // the colour is user defined and might be invalid
-    const accessibleBackgroundColor = cssOrHexToColour(getAccessibleColour(colour).backgroundColor);
-    if (accessibleBackgroundColor !== null) {
-      rowBgColour = colourToHex({
-        ...accessibleBackgroundColor,
-        alpha: accessibleBackgroundColor.alpha * 0.25,
-      });
-    }
-  }
+  const rowBgColour = useMemo(() => {
+    if (!colour) return undefined;
+    const accessibleBg = cssOrHexToColour(getAccessibleColour(colour).backgroundColor);
+    if (accessibleBg === null) return undefined;
+    return colourToHex({ ...accessibleBg, alpha: accessibleBg.alpha * 0.25 });
+  }, [colour]);
 
   return (
     <tr