feat(performance): enhance application performance with optimizations and monitoring

- Updated package dependencies for improved localization support and performance.
- Introduced CSS performance optimizations to prevent layout shifts and enhance rendering efficiency.
- Implemented asset preloading and lazy loading strategies for critical components to improve load times.
- Enhanced translation loading with optimized caching and background loading strategies.
- Added performance monitoring utilities to track key metrics and improve user experience.
- Refactored task management components to utilize new performance features and ensure efficient rendering.
- Introduced new utility functions for asset and CSS optimizations to streamline resource management.

worklenz-frontend/src/layouts/MainLayout.tsx

@@ -1,6 +1,6 @@
 import { Col, ConfigProvider, Layout } from 'antd';
 import { Outlet, useNavigate } from 'react-router-dom';
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useEffect, useRef } from 'react';
 import { useMediaQuery } from 'react-responsive';
 
 import Navbar from '../features/navbar/navbar';
@@ -10,15 +10,30 @@ import { colors } from '../styles/colors';
 
 import { useRenderPerformance } from '@/utils/performance';
 import HubSpot from '@/components/HubSpot';
+import { DynamicCSSLoader, LayoutStabilizer } from '@/utils/css-optimizations';
 
 const MainLayout = memo(() => {
   const themeMode = useAppSelector(state => state.themeReducer.mode);
   const isDesktop = useMediaQuery({ query: '(min-width: 1024px)' });
-  
+  const layoutRef = useRef<HTMLDivElement>(null);
 
   // Performance monitoring in development
   useRenderPerformance('MainLayout');
 
+  // Apply layout optimizations
+  useEffect(() => {
+    if (layoutRef.current) {
+      // Prevent layout shifts in main content area
+      LayoutStabilizer.applyContainment(layoutRef.current, 'layout');
+      
+      // Load non-critical CSS dynamically
+      DynamicCSSLoader.loadCSS('/styles/non-critical.css', {
+        priority: 'low',
+        media: 'all'
+      });
+    }
+  }, []);
+
   
 
   // Memoize styles to prevent object recreation on every render
@@ -64,13 +79,13 @@ const MainLayout = memo(() => {
 
   return (
     <ConfigProvider theme={themeConfig}>
-      <Layout style={{ minHeight: '100vh' }}>
-        <Layout.Header className={headerClassName} style={headerStyles}>
+      <Layout ref={layoutRef} style={{ minHeight: '100vh' }} className="prevent-layout-shift">
+        <Layout.Header className={`${headerClassName} gpu-accelerated`} style={headerStyles}>
           <Navbar />
         </Layout.Header>
 
-        <Layout.Content>
-          <Col xxl={{ span: 18, offset: 3, flex: '100%' }} style={contentStyles}>
+        <Layout.Content className="layout-contained">
+          <Col xxl={{ span: 18, offset: 3, flex: '100%' }} style={contentStyles} className="task-content-container">
             <Outlet />
           </Col>
         </Layout.Content>