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;
   }

worklenz-frontend/src/components/task-management/task-list-board.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { useTranslation } from 'react-i18next';
+import { useTaskManagementTranslations } from '@/hooks/useTranslationPreloader';
 import {
   DndContext,
   DragOverlay,
@@ -124,7 +124,7 @@ const throttle = <T extends (...args: any[]) => void>(func: T, delay: number): T
 
 const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = '' }) => {
   const dispatch = useDispatch<AppDispatch>();
-  const { t } = useTranslation('task-management');
+  const { t, ready, isLoading } = useTaskManagementTranslations();
   const { trackMixpanelEvent } = useMixpanelTracking();
   const [dragState, setDragState] = useState<DragState>({
     activeTask: null,
@@ -658,6 +658,17 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
     };
   }, []);
 
+  // Don't render until translations are ready to prevent Suspense
+  if (!ready || isLoading) {
+    return (
+      <Card className={className}>
+        <div className="flex justify-center items-center py-8">
+          <Spin size="large" />
+        </div>
+      </Card>
+    );
+  }
+
   if (error) {
     return (
       <Card className={className}>