From a89f91c8d11a60df280d4adacb0c4c8f70d6acde Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@fourgebranding.com>
Date: Wed, 13 May 2026 13:02:14 -0400
Subject: [PATCH] Fix MyRequests slow load and stuck spinner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 69 ++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 36 deletions(-)

diff --git a/src/pages/client/MyRequests.jsx b/src/pages/client/MyRequests.jsx
index 34c05c9..8502ba4 100755
--- a/src/pages/client/MyRequests.jsx
+++ b/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,47 +18,43 @@ export default function MyRequests() {
 
   useEffect(() => {
     async function load() {
-      // Only fetch tasks where current user was the original submitter
-      const { data: mySubs } = await supabase
-        .from('submissions')
-        .select('task_id, submitted_by_name, version_number, type')
-        .eq('submitted_by', currentUser.id)
-        .eq('type', 'initial');
+      try {
+        const { data: mySubs } = await withTimeout(
+          supabase.from('submissions').select('task_id, submitted_by_name, version_number, type').eq('submitted_by', currentUser.id).eq('type', 'initial'),
+          10000, 'My submissions'
+        );
 
-      if (!mySubs || mySubs.length === 0) { setLoading(false); return; }
+        if (!mySubs || mySubs.length === 0) return;
 
-      const myTaskIds = mySubs.map(s => s.task_id);
+        const myTaskIds = mySubs.map(s => s.task_id);
 
-      const { data: t } = await supabase
-        .from('tasks').select('*, project:projects(id, name, created_at, status)')
-        .in('id', myTaskIds);
-      setTasks(t || []);
+        const [{ data: t }, { data: allSubs }, { data: inv }, { data: itemRows }] = await withTimeout(
+          Promise.all([
+            supabase.from('tasks').select('*, project:projects(id, name, created_at, status)').in('id', myTaskIds),
+            supabase.from('submissions').select('task_id, submitted_by_name, version_number, type').in('task_id', myTaskIds).order('version_number'),
+            supabase.from('invoices').select('id, status'),
+            supabase.from('invoice_items').select('task_id, invoice_id').in('task_id', myTaskIds),
+          ]),
+          12000, 'My requests data'
+        );
 
-      // 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 tasks = t || [];
+        setTasks(tasks);
+        setSubmissions(allSubs || []);
+        setInvoices(inv || []);
+        setInvoiceItems(itemRows || []);
 
-      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),
-      ]);
-      setInvoices(inv || []);
-      setInvoiceItems(itemRows || []);
-
-      // Group tasks by project
-      const projectMap = {};
-      (t || []).forEach(task => {
-        const p = task.project;
-        if (!p) return;
-        if (!projectMap[p.id]) projectMap[p.id] = { ...p, id: p.id };
-      });
-      setProjects(Object.values(projectMap));
-
-      setLoading(false);
+        const projectMap = {};
+        tasks.forEach(task => {
+          const p = task.project;
+          if (p && !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]);