+10

src/components/CollectionsFeed/CollectionsFeed.css

Reviewed

··· 318 318 .load-more-container { 319 319 text-align: center; 320 320 margin: 30px 0; 321 321 + display: flex; 322 322 + flex-direction: column; 323 323 + align-items: center; 324 324 + gap: 15px; 325 325 + } 326 326 + 327 327 + .records-count { 328 328 + font-size: 0.9rem; 329 329 + color: var(--text); 330 330 + opacity: 0.8; 321 331 } 322 332 323 333 .load-more-button {

+56 -17

src/components/CollectionsFeed/CollectionsFeed.js

Reviewed

··· 412 412 413 413 // Handle load more button click 414 414 const handleLoadMore = async () => { 415 415 - if (did && serviceEndpoint && Object.keys(collectionCursors).length > 0) { 415 415 + setFetchingMore(true); 416 416 + 417 417 + // First check if we already have more records locally that we can show 418 418 + if (hasMoreRecordsLocally) { 419 419 + console.log("Loading more records from local cache"); 420 420 + // Simply increase the number of displayed records 421 421 + const currentDisplayCount = filteredRecords.length; 422 422 + const nextBatchSize = 25; 423 423 + 424 424 + // Store the new count so our filteredRecords computation shows more records 425 425 + setRecords(prev => { 426 426 + // Create a dummy array of the right length to control how many records are shown 427 427 + return Array(currentDisplayCount + nextBatchSize).fill(null); 428 428 + }); 429 429 + 430 430 + setFetchingMore(false); 431 431 + } 432 432 + // If we've displayed all local records but have cursors to fetch more from the API 433 433 + else if (hasMoreRecordsRemotely) { 434 434 + console.log("Fetching more records from API"); 416 435 // Only load more from collections that have cursors and are selected 417 436 const collectionsToLoad = selectedCollections.filter(collection => collectionCursors[collection]); 418 437 419 438 if (collectionsToLoad.length > 0) { 420 439 await fetchCollectionRecords(did, serviceEndpoint, collectionsToLoad, true); 440 440 + } else { 441 441 + setFetchingMore(false); 421 442 } 443 443 + } else { 444 444 + console.log("No more records to load"); 445 445 + setFetchingMore(false); 422 446 } 423 447 }; 424 448 425 425 - // Filter records for timeline display based on selected collections 426 426 - const filteredRecords = records.filter(record => 449 449 + // Filter ALL chart records based on selected collections 450 450 + const filteredChartRecords = allRecordsForChart.filter(record => 427 451 selectedCollections.includes(record.collection) 428 452 ); 429 453 430 430 - // Filter ALL chart records based on selected collections - this is what the chart will use 431 431 - const filteredChartRecords = allRecordsForChart.filter(record => 432 432 - selectedCollections.includes(record.collection) 433 433 - ); 454 454 + // For timeline display, directly use the chart records but limit to most recent 25 455 455 + // This ensures we always show the most recent records for the selected collections 456 456 + // regardless of what was initially loaded in the records state 457 457 + const filteredRecords = filteredChartRecords 458 458 + .sort((a, b) => { 459 459 + // Sort by timestamp (newest first) 460 460 + const aTime = useRkeyTimestamp ? a.rkeyTimestamp : a.contentTimestamp; 461 461 + const bTime = useRkeyTimestamp ? b.rkeyTimestamp : b.contentTimestamp; 462 462 + return new Date(bTime) - new Date(aTime); 463 463 + }) 464 464 + .slice(0, fetchingMore ? records.length : 25); // Show 25 records initially, more when loading more 434 465 435 435 - // Check if more records can be loaded 436 436 - const canLoadMore = Object.keys(collectionCursors).some(collection => 466 466 + // Check if more records can be loaded - either from API or from our existing dataset 467 467 + const hasMoreRecordsLocally = filteredChartRecords.length > filteredRecords.length; 468 468 + const hasMoreRecordsRemotely = Object.keys(collectionCursors).some(collection => 437 469 selectedCollections.includes(collection) 438 470 ); 471 471 + const canLoadMore = hasMoreRecordsLocally || hasMoreRecordsRemotely; 439 472 440 473 return ( 441 474 <div className="collections-feed-container"> ··· 668 701 </div> 669 702 )} 670 703 671 671 - {filteredRecords.length > 0 && canLoadMore && ( 704 704 + {filteredRecords.length > 0 && ( 672 705 <div className="load-more-container"> 673 673 - <button 674 674 - className="load-more-button" 675 675 - onClick={handleLoadMore} 676 676 - disabled={fetchingMore} 677 677 - > 678 678 - {fetchingMore ? 'Loading...' : 'Load More Records'} 679 679 - </button> 706 706 + <div className="records-count"> 707 707 + Showing {filteredRecords.length} of {filteredChartRecords.length} records 708 708 + </div> 709 709 + 710 710 + {canLoadMore && ( 711 711 + <button 712 712 + className="load-more-button" 713 713 + onClick={handleLoadMore} 714 714 + disabled={fetchingMore} 715 715 + > 716 716 + {fetchingMore ? 'Loading...' : 'Load More Records'} 717 717 + </button> 718 718 + )} 680 719 </div> 681 720 )} 682 721 </>