Defer profile favourites until needed

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

@@ -13,7 +13,7 @@ function FavSkeleton() {
  * TabFavourites
  * Shows artworks the user has favourited.
  */
-export default function TabFavourites({ favourites, isOwner, username }) {
+export default function TabFavourites({ favourites, isOwner, username, loading = false, error = false, onRetry }) {
   const initialItems = Array.isArray(favourites)
     ? favourites
     : (favourites?.data ?? [])
@@ -80,7 +80,20 @@ export default function TabFavourites({ favourites, isOwner, username }) {
         {isOwner ? 'Your Favourites' : 'Favourites'}
       </h2>
 
-      {items.length === 0 ? (
+      {loading && items.length === 0 && (
+        <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4">
+          {Array.from({ length: 4 }).map((_, i) => <FavSkeleton key={`initial-sk-${i}`} />)}
+        </div>
+      )}
+
+      {error && items.length === 0 && (
+        <div className="py-12 text-center text-slate-400">
+          <p>Favourites could not be loaded.</p>
+          {onRetry ? <button type="button" onClick={onRetry} className="mt-4 rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-200">Retry</button> : null}
+        </div>
+      )}
+
+      {!loading && !error && items.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-20 text-center">
           <div className="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center mb-5 text-slate-500">
             <i className="fa-solid fa-heart text-3xl" />