Merge pull request #153 from geturbackend/v0/dashboard-loading-slow-4a22ea74

fix: reduce loading latency on create-collection page

Author: yash-pouranik

apps/web-dashboard/src/pages/CreateCollection.jsx

@@ -21,7 +21,7 @@ function createEmptyField() {
 }
 
 // FUNCTION - FIELD ROW COMPONENT
-function FieldRow({ field, index, depth, collections, onChange, onRemove }) {
+function FieldRow({ field, index, depth, collections, collectionsLoading, collectionsError, onChange, onRemove }) {
     const [expanded, setExpanded] = useState(true);
 
     const handleChange = (prop, value) => {
@@ -283,11 +283,12 @@ function FieldRow({ field, index, depth, collections, onChange, onRemove }) {
                     </span>
                     <select
                         value={field.ref || ''}
+                        disabled={collectionsLoading || collectionsError}
                         onChange={(e) => handleChange('ref', e.target.value)}
                         className="input-field"
                         style={{ flex: 1, fontSize: '0.85rem', padding: '4px 8px', background: 'rgba(0,0,0,0.2)', border: '1px solid var(--color-border)', borderRadius: '4px' }}
                     >
-                        <option value="">Select collection...</option>
+                        <option value="">{collectionsLoading ? 'Loading collections…' : collectionsError ? 'Failed to load' : 'Select collection...'}</option>
                         {collections.map(c => (
                             <option key={c.name} value={c.name}>{c.name}</option>
                         ))}
@@ -320,6 +321,8 @@ function FieldRow({ field, index, depth, collections, onChange, onRemove }) {
                                 index={subIdx}
                                 depth={depth + 1}
                                 collections={collections}
+                                collectionsLoading={collectionsLoading}
+                                collectionsError={collectionsError}
                                 onChange={handleSubFieldChange}
                                 onRemove={removeSubField}
                             />
@@ -370,6 +373,8 @@ function FieldRow({ field, index, depth, collections, onChange, onRemove }) {
                                         index={subIdx}
                                         depth={depth + 1}
                                         collections={collections}
+                                        collectionsLoading={collectionsLoading}
+                                        collectionsError={collectionsError}
                                         onChange={handleItemSubFieldChange}
                                         onRemove={removeItemSubField}
                                     />
@@ -384,11 +389,12 @@ function FieldRow({ field, index, depth, collections, onChange, onRemove }) {
                                 </span>
                                 <select
                                     value={field.items?.ref || ''}
+                                    disabled={collectionsLoading || collectionsError}
                                     onChange={(e) => handleItemsChange('ref', e.target.value)}
                                     className="input-field"
                                     style={{ flex: 1, fontSize: '0.85rem', padding: '4px 8px', background: 'rgba(0,0,0,0.2)', border: '1px solid var(--color-border)', borderRadius: '4px' }}
                                 >
-                                    <option value="">Select collection...</option>
+                                    <option value="">{collectionsLoading ? 'Loading collections…' : collectionsError ? 'Failed to load' : 'Select collection...'}</option>
                                     {collections.map(c => (
                                         <option key={c.name} value={c.name}>{c.name}</option>
                                     ))}
@@ -454,15 +460,31 @@ function CreateCollection() {
     const [fields, setFields] = useState(getInitialFields());
     const [loading, setLoading] = useState(false);
     const [collections, setCollections] = useState([]);
+    const [collectionsLoading, setCollectionsLoading] = useState(true);
+    const [collectionsError, setCollectionsError] = useState(null);
 
-    // Fetch existing collections for Ref picker
+    // Fetch existing collections for Ref picker — runs immediately on mount
+    // so it fires in parallel with any other in-flight requests.
     useEffect(() => {
         let isMounted = true;
         const fetchCollections = async () => {
+            if (isMounted) {
+                setCollectionsLoading(true);
+                setCollections([]);
+                setCollectionsError(null);
+            }
             try {
                 const res = await api.get(`/api/projects/${projectId}`);
                 if (isMounted) setCollections(res.data.collections || []);
-            } catch { /* ignore */ }
+            } catch (err) {
+                console.error('Failed to fetch collections for Ref picker:', err);
+                if (isMounted) {
+                    setCollectionsError('Failed to load collections');
+                    toast.error('Failed to load collections for references');
+                }
+            } finally {
+                if (isMounted) setCollectionsLoading(false);
+            }
         };
         fetchCollections();
         return () => { isMounted = false; };
@@ -598,6 +620,8 @@ function CreateCollection() {
                                 index={index}
                                 depth={1}
                                 collections={collections}
+                                collectionsLoading={collectionsLoading}
+                                collectionsError={collectionsError}
                                 onChange={handleFieldChange}
                                 onRemove={removeField}
                             />

apps/web-dashboard/src/utils/api.js

@@ -7,6 +7,9 @@ const api = axios.create({
 });
 
 let csrfToken = null;
+// Eagerly start fetching the CSRF token as soon as this module loads so the
+// token is already available by the time the user submits any form.
+let csrfTokenPromise = null;
 
 const fetchCsrfToken = async () => {
     try {
@@ -15,16 +18,26 @@ const fetchCsrfToken = async () => {
         return csrfToken;
     } catch (err) {
         console.error("Failed to fetch CSRF token:", err);
+        // Clear the promise so subsequent requests will retry instead of reusing a failed result.
+        csrfTokenPromise = null;
         return null;
     }
 };
 
+// Kick off the fetch immediately — reuse the same promise to avoid duplicate requests.
+csrfTokenPromise = fetchCsrfToken();
+
 api.interceptors.request.use(async (config) => {
-    const method = config.method.toLowerCase();
+    // Guard against undefined method (defaults to 'get')
+    const method = (config.method || 'get').toLowerCase();
 
     if (['post', 'put', 'delete', 'patch'].includes(method)) {
         if (!csrfToken) {
-            csrfToken = await fetchCsrfToken();
+            // If the eager fetch failed (csrfTokenPromise is null), trigger a fresh fetch.
+            if (!csrfTokenPromise) {
+                csrfTokenPromise = fetchCsrfToken();
+            }
+            csrfToken = await csrfTokenPromise;
         }
         if (csrfToken) {
             config.headers['X-CSRF-Token'] = csrfToken;