✨ feat: PostCard 로드될 때 Skeleton UI 적용 #281
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- shadcn/ui skeleton 컴포넌트 활용해 구현 - 로딩 상태에서 보옂리 포스트 카드 스켈레톤 UI 생성
- 기존 loading indicator를 skeleton ui로 교체 - 무한 스크롤 로딩 상태에도 skeleton ui 적용 - Intersection Observer 설정 최적화 (threshold: 0.3, rootMargin: 100px) - 추가 로딩 시 보여지는 스켈레톤 카드 수 조정
14 tasks
junyeokk
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🔨 테스크
Issue
Skeleton UI 도입 배경
구현 시 고려사항
📋 작업 내용
PostCardSkeleton 컴포넌트 구현
최신 포스트 섹션(LatestSection) Skeleton UI 적용
트렌딩 포스트 섹션(TrendingSection) Skeleton UI 적용
📷 스크린 샷
skeleton ui
skeleton.ui.only.mov
skeleton ui + 실제 데이터
skeleton.ui.+.real.data.mov
skeleton 무한 스크롤 다음 페이지 로딩 넣기 전
before.skeleton.nextpage.loading.mov
skeleton 무한 스크롤 다음 페이지 로딩 넣은 후
after.skeleton.nextpage.+.increase.threshold.+.root.margin.100.mov