krao/fourge-portal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix MyRequests slow load and stuck spinner

Browse Source 
- 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>
This commit is contained in:
Krao Hasanee
2026-05-13 13:02:14 -04:00
parent 03fbed8ccc
commit a89f91c8d1
1 changed files with 33 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/client/MyRequests.jsx
+24 -27
View File
@@ -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
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 { data: t } = await supabase
.from('tasks').select('*, project:projects(id, name, created_at, status)')
.in('id', myTaskIds);
setTasks(t || []);
// 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([
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'
);
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 (!projectMap[p.id]) projectMap[p.id] = { ...p, id: p.id };
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]);