From 57b58bf7a350a5f5d392c27463ad8a5b598e1bb9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 19 Jan 2026 10:57:51 +0000
Subject: [PATCH] perf(client): optimize Logo component re-renders

---
 .jules/bolt.md                             |  3 +++
 apps/client/src/components/common/Logo.tsx |  8 ++------
 client_output.log                          | 19 +++++++++++++++++++
 3 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 .jules/bolt.md
 create mode 100644 client_output.log

diff --git a/.jules/bolt.md b/.jules/bolt.md
new file mode 100644
index 0000000..e40047b
--- /dev/null
+++ b/.jules/bolt.md
@@ -0,0 +1,3 @@
+## 2026-01-19 - Iconify Bundle Bloat
+**Learning:** The `IconifyIcon` component imports full JSON datasets for multiple icon libraries (material-symbols, eva, etc.) into the client bundle. This likely causes massive bundle bloat.
+**Action:** In the future, refactor `IconifyIcon` to use dynamic imports or an API to fetch icon data on demand, rather than bundling all icon sets.
diff --git a/apps/client/src/components/common/Logo.tsx b/apps/client/src/components/common/Logo.tsx
index e62e8f4..1533174 100644
--- a/apps/client/src/components/common/Logo.tsx
+++ b/apps/client/src/components/common/Logo.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useId, useMemo } from 'react';
 import { Link, SvgIcon, SvgIconProps, Typography, typographyClasses } from '@mui/material';
 import { useSettingsContext } from 'providers/SettingsProvider';
 import { rootPaths } from 'routes/paths';
@@ -8,7 +8,7 @@ interface LogoProps extends SvgIconProps {
 }
 
 const Logo = ({ sx, viewBox = '0 0 26 40', showName = true, ...rest }: LogoProps) => {
-  const [id, setId] = useState('logo');
+  const id = useId();
 
   const {
     config: { navColor },
@@ -18,10 +18,6 @@ const Logo = ({ sx, viewBox = '0 0 26 40', showName = true, ...rest }: LogoProps
     return navColor === 'vibrant' ? '#A641FA' : '#20DE99';
   }, [navColor]);
 
-  useEffect(() => {
-    setId(`logo-${Math.floor(Math.random() * 1000) + 1}`);
-  }, []);
-
   return (
     <Link
       href={rootPaths.root}
diff --git a/client_output.log b/client_output.log
new file mode 100644
index 0000000..f7605c0
--- /dev/null
+++ b/client_output.log
@@ -0,0 +1,19 @@
+
+> client@1.0.0 dev /app/apps/client
+> next dev --turbopack -p 3001
+
+   ▲ Next.js 15.5.9 (Turbopack)
+   - Local:        http://localhost:3001
+   - Network:      http://192.168.0.2:3001
+
+ ✓ Starting...
+ ○ Compiling middleware ...
+ ✓ Compiled middleware in 979ms
+ ✓ Ready in 2.6s
+ ○ Compiling /auth/login ...
+ ✓ Compiled /auth/login in 19.4s
+ GET /auth/login 200 in 23339ms
+/app/apps/client:
+ ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  client@1.0.0 dev: `next dev --turbopack -p 3001`
+Command failed with signal "SIGTERM"
+[?25h