feat(performance): implement comprehensive performance improvements for Worklenz frontend

- Introduced a new document summarizing performance optimizations across the application.
- Applied React.memo(), useMemo(), and useCallback() to key components to minimize unnecessary re-renders and optimize rendering performance.
- Implemented a route preloading system to enhance navigation speed and user experience.
- Added performance monitoring utilities for development to track component render times and function execution.
- Enhanced lazy loading and suspense boundaries for better loading states.
- Conducted production optimizations, including TypeScript error fixes and memory management improvements.
- Memoized style and configuration objects to reduce garbage collection pressure and improve memory usage.

worklenz-frontend/src/layouts/MainLayout.tsx

@@ -1,60 +1,74 @@
 import { Col, ConfigProvider, Layout } from 'antd';
 import { Outlet, useNavigate } from 'react-router-dom';
+import { useEffect, memo, useMemo, useCallback } from 'react';
+import { useMediaQuery } from 'react-responsive';
+
 import Navbar from '../features/navbar/navbar';
 import { useAppSelector } from '../hooks/useAppSelector';
-import { useMediaQuery } from 'react-responsive';
+import { useAppDispatch } from '../hooks/useAppDispatch';
 import { colors } from '../styles/colors';
 import { verifyAuthentication } from '@/features/auth/authSlice';
-import { useEffect } from 'react';
-import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useRenderPerformance } from '@/utils/performance';
 import HubSpot from '@/components/HubSpot';
 
-const MainLayout = () => {
+const MainLayout = memo(() => {
   const themeMode = useAppSelector(state => state.themeReducer.mode);
   const isDesktop = useMediaQuery({ query: '(min-width: 1024px)' });
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
-  const verifyAuthStatus = async () => {
+  // Performance monitoring in development
+  useRenderPerformance('MainLayout');
+
+  // Memoize auth verification function
+  const verifyAuthStatus = useCallback(async () => {
     const session = await dispatch(verifyAuthentication()).unwrap();
     if (!session.user.setup_completed) {
       navigate('/worklenz/setup');
     }
-  };
+  }, [dispatch, navigate]);
 
   useEffect(() => {
     void verifyAuthStatus();
-  }, [dispatch, navigate]);
+  }, [verifyAuthStatus]);
 
-  const headerStyles = {
+  // Memoize styles to prevent object recreation on every render
+  const headerStyles = useMemo(() => ({
     zIndex: 999,
-    position: 'fixed',
+    position: 'fixed' as const,
     width: '100%',
     display: 'flex',
     alignItems: 'center',
     padding: 0,
     borderBottom: themeMode === 'dark' ? '1px solid #303030' : 'none',
-  } as const;
+  }), [themeMode]);
 
-  const contentStyles = {
+  const contentStyles = useMemo(() => ({
     paddingInline: isDesktop ? 64 : 24,
-    overflowX: 'hidden',
-  } as const;
+    overflowX: 'hidden' as const,
+  }), [isDesktop]);
+
+  // Memoize theme configuration
+  const themeConfig = useMemo(() => ({
+    components: {
+      Layout: {
+        colorBgLayout: themeMode === 'dark' ? colors.darkGray : colors.white,
+        headerBg: themeMode === 'dark' ? colors.darkGray : colors.white,
+      },
+    },
+  }), [themeMode]);
+
+  // Memoize header className
+  const headerClassName = useMemo(() => 
+    `shadow-md ${themeMode === 'dark' ? '' : 'shadow-[#18181811]'}`,
+    [themeMode]
+  );
 
   return (
-    <ConfigProvider
-      theme={{
-        components: {
-          Layout: {
-            colorBgLayout: themeMode === 'dark' ? colors.darkGray : colors.white,
-            headerBg: themeMode === 'dark' ? colors.darkGray : colors.white,
-          },
-        },
-      }}
-    >
+    <ConfigProvider theme={themeConfig}>
       <Layout style={{ minHeight: '100vh' }}>
         <Layout.Header
-          className={`shadow-md ${themeMode === 'dark' ? '' : 'shadow-[#18181811]'}`}
+          className={headerClassName}
           style={headerStyles}
         >
           <Navbar />
@@ -71,6 +85,8 @@ const MainLayout = () => {
       </Layout>
     </ConfigProvider>
   );
-};
+});
+
+MainLayout.displayName = 'MainLayout';
 
 export default MainLayout;