Defer profile featured artworks

resources/js/Pages/Profile/ProfileShow.jsx

@@ -15,6 +15,7 @@ import TabStories from '../../components/profile/tabs/TabStories'
 import TabWorlds from '../../components/profile/tabs/TabWorlds'
 import TabFollowers from '../../components/profile/tabs/TabFollowers'
 import GroupProfileSummary from '../../components/groups/GroupProfileSummary'
+import useLazyProfileFeaturedArtworks from '../../lib/useLazyProfileFeaturedArtworks'
 
 const VALID_TABS = ['posts', 'artworks', 'stories', 'achievements', 'worlds', 'collections', 'about', 'stats', 'favourites', 'activity', 'followers']
 
@@ -86,6 +87,11 @@ export default function ProfileShow() {
   } = props
 
   const [activeTab, setActiveTab] = useState(() => getInitialTab(initialTab))
+  const featuredState = useLazyProfileFeaturedArtworks({
+    username: user?.username || user?.name || '',
+    initialFeaturedArtworks: featuredArtworks,
+    enabled: activeTab === 'artworks',
+  })
 
   const handleTabChange = useCallback((tab) => {
     if (!VALID_TABS.includes(tab)) return
@@ -195,7 +201,10 @@ export default function ProfileShow() {
         {activeTab === 'artworks' && (
           <TabArtworks
             artworks={{ data: artworkList, next_cursor: artworkNextCursor }}
-            featuredArtworks={featuredArtworks}
+            featuredArtworks={featuredState.items}
+            featuredLoading={featuredState.loading}
+            featuredError={featuredState.error}
+            onRetryFeatured={featuredState.retry}
             username={user.username || user.name}
             galleryUrl={galleryUrl}
             isActive