Fix MyRequests slow load and stuck spinner

- Parallelize tasks + submissions + invoices + invoice_items (4 serial → 1 parallel batch)
- Wrap with withTimeout (10s/12s) so hung queries don't freeze indefinitely
- Add try/catch + finally to guarantee setLoading(false) on any failure

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/client/MyRequests.jsx

@@ -4,6 +4,7 @@ import Layout from '../../components/Layout';
 import StatusBadge from '../../components/StatusBadge';
 import { supabase } from '../../lib/supabase';
 import { useAuth } from '../../context/AuthContext';
+import { withTimeout } from '../../lib/withTimeout';
 
 export default function MyRequests() {
   const { currentUser } = useAuth();
@@ -17,48 +18,44 @@ export default function MyRequests() {
 
   useEffect(() => {
     async function load() {
-      // Only fetch tasks where current user was the original submitter
+      try {
-      const { data: mySubs } = await supabase
+        const { data: mySubs } = await withTimeout(
-        .from('submissions')
+          supabase.from('submissions').select('task_id, submitted_by_name, version_number, type').eq('submitted_by', currentUser.id).eq('type', 'initial'),
-        .select('task_id, submitted_by_name, version_number, type')
+          10000, 'My submissions'
-        .eq('submitted_by', currentUser.id)
+        );
-        .eq('type', 'initial');
 
-      if (!mySubs || mySubs.length === 0) { setLoading(false); return; }
+        if (!mySubs || mySubs.length === 0) return;
 
         const myTaskIds = mySubs.map(s => s.task_id);
 
-      const { data: t } = await supabase
+        const [{ data: t }, { data: allSubs }, { data: inv }, { data: itemRows }] = await withTimeout(
-        .from('tasks').select('*, project:projects(id, name, created_at, status)')
+          Promise.all([
-        .in('id', myTaskIds);
+            supabase.from('tasks').select('*, project:projects(id, name, created_at, status)').in('id', myTaskIds),
-      setTasks(t || []);
+            supabase.from('submissions').select('task_id, submitted_by_name, version_number, type').in('task_id', myTaskIds).order('version_number'),
-
-      // Also fetch all submissions for these tasks (to show revision history)
-      const { data: allSubs } = await supabase
-        .from('submissions')
-        .select('task_id, submitted_by_name, version_number, type')
-        .in('task_id', myTaskIds)
-        .order('version_number');
-      setSubmissions(allSubs || []);
-
-      const [{ data: inv }, { data: itemRows }] = await Promise.all([
             supabase.from('invoices').select('id, status'),
             supabase.from('invoice_items').select('task_id, invoice_id').in('task_id', myTaskIds),
-      ]);
+          ]),
+          12000, 'My requests data'
+        );
+
+        const tasks = t || [];
+        setTasks(tasks);
+        setSubmissions(allSubs || []);
         setInvoices(inv || []);
         setInvoiceItems(itemRows || []);
 
-      // Group tasks by project
         const projectMap = {};
-      (t || []).forEach(task => {
+        tasks.forEach(task => {
           const p = task.project;
-        if (!p) return;
+          if (p && !projectMap[p.id]) projectMap[p.id] = { ...p, id: p.id };
-        if (!projectMap[p.id]) projectMap[p.id] = { ...p, id: p.id };
         });
         setProjects(Object.values(projectMap));
-
+      } catch (err) {
+        console.error('MyRequests load failed:', err);
+      } finally {
         setLoading(false);
       }
+    }
     load();
   }, [currentUser.id]);