feat(i18n): enhance translation loading and preloading mechanism

- Introduced a utility function `ensureTranslationsLoaded` to preload essential translation namespaces, improving app initialization.
- Updated `App` component to initialize translations alongside CSRF token on startup.
- Created custom hooks `useTranslationPreloader`, `useBulkActionTranslations`, and `useTaskManagementTranslations` to manage translation readiness and prevent Suspense issues.
- Refactored components to utilize new translation hooks, ensuring translations are ready before rendering.
- Enhanced `OptimizedBulkActionBar` and `TaskListBoard` components to improve user experience during language switching.

worklenz-frontend/src/components/task-management/optimized-bulk-action-bar.tsx

@@ -21,10 +21,10 @@ import {
   FlagOutlined,
   BulbOutlined
 } from '@ant-design/icons';
-import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/app/store';
 import { useAppSelector } from '@/hooks/useAppSelector';
+import { useBulkActionTranslations } from '@/hooks/useTranslationPreloader';
 
 const { Text } = Typography;
 
@@ -138,7 +138,7 @@ const OptimizedBulkActionBarContent: React.FC<OptimizedBulkActionBarProps> = Rea
   onBulkExport,
   onBulkSetDueDate,
 }) => {
-  const { t } = useTranslation('tasks/task-table-bulk-actions');
+  const { t, ready, isLoading } = useBulkActionTranslations();
   const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
   
   // Get data from Redux store
@@ -324,6 +324,11 @@ const OptimizedBulkActionBarContent: React.FC<OptimizedBulkActionBarProps> = Rea
     whiteSpace: 'nowrap' as const,
   }), [isDarkMode]);
 
+  // Don't render until translations are ready to prevent Suspense
+  if (!ready || isLoading) {
+    return null;
+  }
+
   if (!totalSelected || Number(totalSelected) < 1) {
     return null;
   }