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/hooks/useTranslationPreloader.ts

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ensureTranslationsLoaded } from '@/i18n';
+
+interface UseTranslationPreloaderOptions {
+  namespaces?: string[];
+  fallback?: React.ReactNode;
+}
+
+/**
+ * Hook to ensure translations are loaded before rendering components
+ * This prevents Suspense issues when components use useTranslation
+ */
+export const useTranslationPreloader = (
+  namespaces: string[] = ['tasks/task-table-bulk-actions', 'task-management'],
+  options: UseTranslationPreloaderOptions = {}
+) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const { t, ready } = useTranslation(namespaces);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadTranslations = async () => {
+      try {
+        setIsLoading(true);
+        
+        // Ensure translations are loaded
+        await ensureTranslationsLoaded(namespaces);
+        
+        // Wait for i18next to be ready
+        if (!ready) {
+          // If i18next is not ready, wait a bit and check again
+          await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        
+        if (isMounted) {
+          setIsLoaded(true);
+          setIsLoading(false);
+        }
+      } catch (error) {
+        if (isMounted) {
+          setIsLoaded(true); // Still set as loaded to prevent infinite loading
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadTranslations();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [namespaces, ready]);
+
+  return {
+    t,
+    ready: isLoaded && ready,
+    isLoading,
+    isLoaded,
+  };
+};
+
+/**
+ * Hook specifically for bulk action bar translations
+ */
+export const useBulkActionTranslations = () => {
+  return useTranslationPreloader(['tasks/task-table-bulk-actions']);
+};
+
+/**
+ * Hook for task management translations
+ */
+export const useTaskManagementTranslations = () => {
+  return useTranslationPreloader(['task-management', 'tasks/task-table-bulk-actions']);
+};