From 8bf614607cdd37a1c5b1a4bae2f1f6a65642fcb8 Mon Sep 17 00:00:00 2001
From: Lavissa <lavissawow@gmail.com>
Date: Wed, 21 Feb 2024 23:00:27 +0100
Subject: [PATCH] Wrap theme parameters in memo (#6542)

---
 .../forms/fields/RelatedModelField.tsx        | 82 +++++++++--------
 .../src/components/nav/PartCategoryTree.tsx   | 89 ++++++++++---------
 2 files changed, 89 insertions(+), 82 deletions(-)

diff --git a/src/frontend/src/components/forms/fields/RelatedModelField.tsx b/src/frontend/src/components/forms/fields/RelatedModelField.tsx
index 3bdf4513e6..1d2b617899 100644
--- a/src/frontend/src/components/forms/fields/RelatedModelField.tsx
+++ b/src/frontend/src/components/forms/fields/RelatedModelField.tsx
@@ -211,45 +211,49 @@ export function RelatedModelField({
 
   // Field doesn't follow Mantine theming
   // Define color theme to pass to field based on Mantine theme
-  const th = useMantineTheme();
-  let colors: any;
-  if (th.colorScheme === 'dark') {
-    colors = {
-      neutral0: th.colors[th.colorScheme][6],
-      neutral5: th.colors[th.colorScheme][4],
-      neutral10: th.colors[th.colorScheme][4],
-      neutral20: th.colors[th.colorScheme][4],
-      neutral30: th.colors[th.colorScheme][3],
-      neutral40: th.colors[th.colorScheme][2],
-      neutral50: th.colors[th.colorScheme][1],
-      neutral60: th.colors[th.colorScheme][0],
-      neutral70: th.colors[th.colorScheme][0],
-      neutral80: th.colors[th.colorScheme][0],
-      neutral90: th.colors[th.colorScheme][0],
-      primary: th.colors[th.primaryColor][7],
-      primary25: th.colors[th.primaryColor][6],
-      primary50: th.colors[th.primaryColor][5],
-      primary75: th.colors[th.primaryColor][4]
-    };
-  } else {
-    colors = {
-      neutral0: th.white,
-      neutral5: th.fn.darken(th.white, 0.05),
-      neutral10: th.fn.darken(th.white, 0.1),
-      neutral20: th.fn.darken(th.white, 0.2),
-      neutral30: th.fn.darken(th.white, 0.3),
-      neutral40: th.fn.darken(th.white, 0.4),
-      neutral50: th.fn.darken(th.white, 0.5),
-      neutral60: th.fn.darken(th.white, 0.6),
-      neutral70: th.fn.darken(th.white, 0.7),
-      neutral80: th.fn.darken(th.white, 0.8),
-      neutral90: th.fn.darken(th.white, 0.9),
-      primary: th.colors[th.primaryColor][7],
-      primary25: th.colors[th.primaryColor][4],
-      primary50: th.colors[th.primaryColor][5],
-      primary75: th.colors[th.primaryColor][6]
-    };
-  }
+  const theme = useMantineTheme();
+
+  const colors = useMemo(() => {
+    let colors: any;
+    if (theme.colorScheme === 'dark') {
+      colors = {
+        neutral0: theme.colors[theme.colorScheme][6],
+        neutral5: theme.colors[theme.colorScheme][4],
+        neutral10: theme.colors[theme.colorScheme][4],
+        neutral20: theme.colors[theme.colorScheme][4],
+        neutral30: theme.colors[theme.colorScheme][3],
+        neutral40: theme.colors[theme.colorScheme][2],
+        neutral50: theme.colors[theme.colorScheme][1],
+        neutral60: theme.colors[theme.colorScheme][0],
+        neutral70: theme.colors[theme.colorScheme][0],
+        neutral80: theme.colors[theme.colorScheme][0],
+        neutral90: theme.colors[theme.colorScheme][0],
+        primary: theme.colors[theme.primaryColor][7],
+        primary25: theme.colors[theme.primaryColor][6],
+        primary50: theme.colors[theme.primaryColor][5],
+        primary75: theme.colors[theme.primaryColor][4]
+      };
+    } else {
+      colors = {
+        neutral0: theme.white,
+        neutral5: theme.fn.darken(theme.white, 0.05),
+        neutral10: theme.fn.darken(theme.white, 0.1),
+        neutral20: theme.fn.darken(theme.white, 0.2),
+        neutral30: theme.fn.darken(theme.white, 0.3),
+        neutral40: theme.fn.darken(theme.white, 0.4),
+        neutral50: theme.fn.darken(theme.white, 0.5),
+        neutral60: theme.fn.darken(theme.white, 0.6),
+        neutral70: theme.fn.darken(theme.white, 0.7),
+        neutral80: theme.fn.darken(theme.white, 0.8),
+        neutral90: theme.fn.darken(theme.white, 0.9),
+        primary: theme.colors[theme.primaryColor][7],
+        primary25: theme.colors[theme.primaryColor][4],
+        primary50: theme.colors[theme.primaryColor][5],
+        primary75: theme.colors[theme.primaryColor][6]
+      };
+    }
+    return colors;
+  }, [theme]);
 
   return (
     <Input.Wrapper
diff --git a/src/frontend/src/components/nav/PartCategoryTree.tsx b/src/frontend/src/components/nav/PartCategoryTree.tsx
index 6fe2bd8bd4..b9f730bafa 100644
--- a/src/frontend/src/components/nav/PartCategoryTree.tsx
+++ b/src/frontend/src/components/nav/PartCategoryTree.tsx
@@ -10,6 +10,7 @@ import {
 import { ReactTree, ThemeSettings } from '@naisutech/react-tree';
 import { IconSitemap } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
@@ -67,54 +68,56 @@ export function PartCategoryTree({
   }
 
   const mantineTheme = useMantineTheme();
-  const currentTheme =
-    mantineTheme.colorScheme === 'dark'
-      ? mantineTheme.colorScheme
-      : mantineTheme.primaryColor;
 
-  const themes: ThemeSettings = {
-    dark: {
-      text: {
-        ...mantineTheme.fn.fontStyles()
+  const themes: ThemeSettings = useMemo(() => {
+    const currentTheme =
+      mantineTheme.colorScheme === 'dark'
+        ? mantineTheme.colorScheme
+        : mantineTheme.primaryColor;
+
+    return {
+      dark: {
+        text: {
+          ...mantineTheme.fn.fontStyles()
+        },
+        nodes: {
+          height: '2.5rem',
+          folder: {
+            selectedBgColor: mantineTheme.colors[currentTheme][4],
+            hoverBgColor: mantineTheme.colors[currentTheme][6]
+          },
+          leaf: {
+            selectedBgColor: mantineTheme.colors[currentTheme][4],
+            hoverBgColor: mantineTheme.colors[currentTheme][6]
+          },
+          icons: {
+            folderColor: mantineTheme.colors[currentTheme][3],
+            leafColor: mantineTheme.colors[currentTheme][3]
+          }
+        }
       },
-      nodes: {
-        height: '2.5rem',
-        folder: {
-          selectedBgColor: mantineTheme.colors[currentTheme][4],
-          hoverBgColor: mantineTheme.colors[currentTheme][6]
+      light: {
+        text: {
+          ...mantineTheme.fn.fontStyles()
         },
-        leaf: {
-          selectedBgColor: mantineTheme.colors[currentTheme][4],
-          hoverBgColor: mantineTheme.colors[currentTheme][6]
-        },
-        icons: {
-          folderColor: mantineTheme.colors[currentTheme][3],
-          leafColor: mantineTheme.colors[currentTheme][3]
+        nodes: {
+          height: '2.5rem',
+          folder: {
+            selectedBgColor: mantineTheme.colors[currentTheme][4],
+            hoverBgColor: mantineTheme.colors[currentTheme][2]
+          },
+          leaf: {
+            selectedBgColor: mantineTheme.colors[currentTheme][4],
+            hoverBgColor: mantineTheme.colors[currentTheme][2]
+          },
+          icons: {
+            folderColor: mantineTheme.colors[currentTheme][8],
+            leafColor: mantineTheme.colors[currentTheme][6]
+          }
         }
       }
-    },
-    light: {
-      text: {
-        ...mantineTheme.fn.fontStyles()
-      },
-      nodes: {
-        height: '2.5rem',
-        folder: {
-          selectedBgColor: mantineTheme.colors[currentTheme][4],
-          hoverBgColor: mantineTheme.colors[currentTheme][2]
-        },
-        leaf: {
-          bgColor: 'initial',
-          selectedBgColor: mantineTheme.colors[currentTheme][4],
-          hoverBgColor: mantineTheme.colors[currentTheme][2]
-        },
-        icons: {
-          folderColor: mantineTheme.colors[currentTheme][8],
-          leafColor: mantineTheme.colors[currentTheme][6]
-        }
-      }
-    }
-  };
+    };
+  }, [mantineTheme]);
 
   return (
     <Drawer