@@ -202,17 +202,24 @@ export default function NFTCollectionPage() {
202202 method : 'eth_chainId' ,
203203 } ) ;
204204 setChainId ( chainId ) ;
205+ // Load collections immediately after setting chainId
206+ loadCollections ( chainId ) ;
207+ // Initial trending data - load for default period
208+ loadTrendingCollections ( '24h' ) ;
205209 } catch ( error ) {
206210 console . error ( 'Error checking network:' , error ) ;
211+ // If there's an error, still load with default chainId
212+ loadCollections ( chainId ) ;
213+ loadTrendingCollections ( '24h' ) ;
207214 }
215+ } else {
216+ // If no window.ethereum, load with default chainId
217+ loadCollections ( chainId ) ;
218+ loadTrendingCollections ( '24h' ) ;
208219 }
209220 } ;
210221
211222 checkNetwork ( ) ;
212- loadCollections ( chainId ) ;
213-
214- // Initial trending data
215- loadTrendingCollections ( '24h' ) ;
216223 } , [ ] ) ;
217224
218225 // Load user NFTs when account or chain changes
@@ -304,6 +311,29 @@ export default function NFTCollectionPage() {
304311 // Load trending collections
305312 const loadTrendingCollections = useCallback ( async ( period : string ) => {
306313 try {
314+ // Create placeholder data with empty array if collections not loaded yet
315+ if ( collections . length === 0 ) {
316+ // Set mock empty data with period to display the section even when data is loading
317+ setTrendingData ( {
318+ period,
319+ data : [
320+ {
321+ id : 'loading-1' ,
322+ name : 'Loading...' ,
323+ imageUrl : '/images/placeholder-nft.png' ,
324+ chain : chainId ,
325+ floorPrice : '0.00' ,
326+ priceChange : 0 ,
327+ volume : '0.00' ,
328+ volumeChange : 0 ,
329+ } ,
330+ // Add more placeholder items as needed
331+ ]
332+ } ) ;
333+ // Return early - real data will be loaded once collections are available
334+ return ;
335+ }
336+
307337 // In real app this would fetch real data
308338 const mockTrendingData = {
309339 period,
@@ -323,7 +353,14 @@ export default function NFTCollectionPage() {
323353 } catch ( error ) {
324354 console . error ( 'Error loading trending data:' , error ) ;
325355 }
326- } , [ collections ] ) ;
356+ } , [ collections , chainId ] ) ;
357+
358+ useEffect ( ( ) => {
359+ // When collections are loaded, update the trending data
360+ if ( collections . length > 0 ) {
361+ loadTrendingCollections ( trendingPeriod ) ;
362+ }
363+ } , [ collections , loadTrendingCollections , trendingPeriod ] ) ;
327364
328365 const handleNetworkChange = ( networkId : string ) => {
329366 setChainId ( networkId ) ;
@@ -516,52 +553,63 @@ export default function NFTCollectionPage() {
516553 </ tr >
517554 </ thead >
518555 < tbody >
519- { trendingData . data . map ( ( item , i ) => (
520- < motion . tr
521- key = { item . id }
522- whileHover = { { backgroundColor : "rgba(255,255,255,0.03)" } }
523- className = "cursor-pointer border-b border-gray-800/50"
524- onClick = { ( ) => handleCardClick ( item . id ) }
525- initial = { { opacity : 0 , y : 10 } }
526- animate = { { opacity : 1 , y : 0 } }
527- transition = { { delay : 0.3 + i * 0.05 } }
528- >
529- < td className = "p-2 text-gray-400" > { i + 1 } </ td >
530- < td className = "p-2" >
531- < div className = "flex items-center gap-3" >
532- < div className = "relative h-10 w-10 rounded-lg overflow-hidden" >
533- < Image
534- src = { item . imageUrl }
535- alt = { item . name }
536- fill
537- className = "object-cover"
538- />
539- </ div >
540- < div >
541- < div className = "font-medium flex items-center gap-1" >
542- { item . name }
543- { ( i === 0 || i === 2 ) && < Verified className = "h-3.5 w-3.5 text-blue-400" /> }
556+ { trendingData . data . length > 0 ? (
557+ trendingData . data . map ( ( item , i ) => (
558+ < motion . tr
559+ key = { item . id }
560+ whileHover = { { backgroundColor : "rgba(255,255,255,0.03)" } }
561+ className = "cursor-pointer border-b border-gray-800/50"
562+ onClick = { ( ) => handleCardClick ( item . id ) }
563+ initial = { { opacity : 0 , y : 10 } }
564+ animate = { { opacity : 1 , y : 0 } }
565+ transition = { { delay : 0.3 + i * 0.05 } }
566+ >
567+ < td className = "p-2 text-gray-400" > { i + 1 } </ td >
568+ < td className = "p-2" >
569+ < div className = "flex items-center gap-3" >
570+ < div className = "relative h-10 w-10 rounded-lg overflow-hidden" >
571+ < Image
572+ src = { item . imageUrl }
573+ alt = { item . name }
574+ fill
575+ className = "object-cover"
576+ />
544577 </ div >
545- < div className = "text-xs text-gray-400" >
546- { getNetworkName ( item . chain ) }
578+ < div >
579+ < div className = "font-medium flex items-center gap-1" >
580+ { item . name }
581+ { ( i === 0 || i === 2 ) && < Verified className = "h-3.5 w-3.5 text-blue-400" /> }
582+ </ div >
583+ < div className = "text-xs text-gray-400" >
584+ { getNetworkName ( item . chain ) }
585+ </ div >
547586 </ div >
548587 </ div >
588+ </ td >
589+ < td className = "p-2 text-right font-medium" >
590+ { item . floorPrice } { item . chain === '0x1' || item . chain === '0xaa36a7' ? 'ETH' : 'BNB' }
591+ </ td >
592+ < td className = { `p-2 text-right ${ item . priceChange >= 0 ? 'text-green-500' : 'text-red-500' } ` } >
593+ { item . priceChange >= 0 ? '+' : '' } { item . priceChange . toFixed ( 2 ) } %
594+ </ td >
595+ < td className = "p-2 text-right font-medium" >
596+ { item . volume } { item . chain === '0x1' || item . chain === '0xaa36a7' ? 'ETH' : 'BNB' }
597+ </ td >
598+ < td className = { `p-2 text-right ${ item . volumeChange >= 0 ? 'text-green-500' : 'text-red-500' } ` } >
599+ { item . volumeChange >= 0 ? '+' : '' } { item . volumeChange . toFixed ( 2 ) } %
600+ </ td >
601+ </ motion . tr >
602+ ) )
603+ ) : (
604+ < tr className = "border-b border-gray-800/50" >
605+ < td colSpan = { 6 } className = "p-4 text-center text-gray-400" >
606+ < div className = "flex flex-col items-center gap-2" >
607+ < div className = "h-5 w-5 border-2 border-t-transparent animate-spin rounded-full" />
608+ < span > Loading trending collections...</ span >
549609 </ div >
550610 </ td >
551- < td className = "p-2 text-right font-medium" >
552- { item . floorPrice } { item . chain === '0x1' || item . chain === '0xaa36a7' ? 'ETH' : 'BNB' }
553- </ td >
554- < td className = { `p-2 text-right ${ item . priceChange >= 0 ? 'text-green-500' : 'text-red-500' } ` } >
555- { item . priceChange >= 0 ? '+' : '' } { item . priceChange . toFixed ( 2 ) } %
556- </ td >
557- < td className = "p-2 text-right font-medium" >
558- { item . volume } { item . chain === '0x1' || item . chain === '0xaa36a7' ? 'ETH' : 'BNB' }
559- </ td >
560- < td className = { `p-2 text-right ${ item . volumeChange >= 0 ? 'text-green-500' : 'text-red-500' } ` } >
561- { item . volumeChange >= 0 ? '+' : '' } { item . volumeChange . toFixed ( 2 ) } %
562- </ td >
563- </ motion . tr >
564- ) ) }
611+ </ tr >
612+ ) }
565613 </ tbody >
566614 </ table >
567615 </ div >
0 commit comments