무한 스크롤 시퀀스

82. 무한 스크롤 시퀀스 Design infinite scroll loading sequence: **Initial Load**: - Fetch first page (10-20 items) - Show loading skeleton - Render items - Observe scroll position **User Scrolls Down**: - Track scroll position - Calculate distance to bottom - Trigger threshold: 200-500px before end **Load More Trigger**: - Threshold reached - Check if more pages exist - If yes: fetch next page - Show loading indicator **Loading Indicator**: - Spinner at bottom of list - Or skeleton items - Or pulsing animation - Maintain scroll position **New Items Loaded**: - Append to existing list - Smooth height transition - Remove loading indicator - Update page counter **End of Content**: - All items loaded - Hide loading trigger - Show "End of list" message - Optional: back to top button **Error During Load**: - Show error message - "Retry" button - Preserve loaded items - Can continue scrolling up **Empty Initial State**: - No items to show - Empty state illustration - CTA if applicable **Refresh Flow** (pull-to-refresh): - Pull down at top - Fetch fresh first page - Replace all items - Reset pagination **Performance Considerations**: - Virtualization for large lists - Debounce scroll handler - Cancel pending on new trigger - Cache previous pages **Visual Sequence Diagram**: 1. User reaches threshold 2. Request sent 3. Loading shown 4. Response received 5. Items appended 6. Ready for next trigger Tech: Sequence diagram → react-virtual + Intersection Observer