Lazy-load profile collections until the tab is opened.

Keep the profile payload smaller on first paint and fetch collections through a dedicated API when the collections tab is needed.

resources/js/components/profile/tabs/TabCollections.jsx

@@ -50,7 +50,7 @@ async function requestJson(url, { method = 'POST', body } = {}) {
 
 const FILTERS = ['all', 'featured', 'smart', 'manual']
 
-export default function TabCollections({ collections, isOwner, createUrl, reorderUrl, featuredUrl, featureLimit = 3 }) {
+export default function TabCollections({ collections, isOwner, createUrl, reorderUrl, featuredUrl, featureLimit = 3, loading = false, error = false, onRetry }) {
   const [items, setItems] = useState(Array.isArray(collections) ? collections : [])
   const [busyId, setBusyId] = useState(null)
   const [filter, setFilter] = useState('all')
@@ -140,6 +140,15 @@ export default function TabCollections({ collections, isOwner, createUrl, reorde
       aria-labelledby="tab-collections"
       className="pt-6"
     >
+      {loading ? <p className="py-10 text-center text-sm text-slate-400">Loading collections…</p> : null}
+      {error ? (
+        <div className="mb-5 rounded-[24px] border border-rose-300/20 bg-rose-400/10 px-5 py-4 text-sm text-rose-100">
+          <span>Collections could not be loaded.</span>
+          {onRetry ? <button type="button" onClick={onRetry} className="ml-3 underline">Retry</button> : null}
+        </div>
+      ) : null}
+      {!loading && !error ? (
+      <>
       <div className="mb-5 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
         <div>
           <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Collections</p>
@@ -218,6 +227,8 @@ export default function TabCollections({ collections, isOwner, createUrl, reorde
           ))}
         </div>
       )}
+      </>
+      ) : null}
     </div>
   )
 }