feat: 이미지 Lazy Loading 적용으로 피드 렌더링 성능 개선#317
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough인증 준비 상태 관리, 지연 로딩 이미지 렌더링, 소셜 로그인 토큰 중복 제거 로직을 추가하고, 게시물 헤더에 별칭 필드를 확장하며, 검색 결과에 작성자 정보와 별칭 색상을 전달합니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/common/Layout.tsx (1)
46-46: 인증 대기 중null렌더 대신 최소 로딩 UI를 두는 것을 권장합니다.Line [46]은 준비 전 화면이 완전히 비어 보여 체감 화이트스크린으로 보일 수 있습니다. 간단한 fallback을 두면 UX가 더 안정적입니다.
♻️ 제안 diff
- {isAuthReady ? <Outlet /> : null} + {isAuthReady ? ( + <Outlet /> + ) : ( + <div role="status" aria-live="polite" aria-busy="true" /> + )}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/Layout.tsx` at line 46, Layout component currently renders nothing while waiting for auth (uses {isAuthReady ? <Outlet /> : null}); replace the null fallback with a minimal loading UI (e.g., a small spinner, skeleton bar, or an accessible "Loading..." status element) so the screen isn't blank. Update the render in the Layout component to show that fallback when isAuthReady is false (you can create a tiny LoadingFallback component or inline element) and ensure it is accessible (role/status or aria-busy) and visually lightweight.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/hooks/useSocialLoginToken.ts`:
- Around line 24-53: The race occurs because the async IIFE always calls
setReady(true) in finally even if a newer loginTokenKey started; modify the
logic in the sharedTokenPromise creation (the async IIFE inside the if that sets
sharedLoginTokenKey/sharedTokenPromise) to capture the current
loginTokenKey/sharedTokenPromise into local constants (e.g., const capturedKey =
sharedLoginTokenKey and const capturedPromise = sharedTokenPromise) and, instead
of unconditionally calling setReady(true) in finally, only call setReady(true)
when the captured values still match the latest ones (e.g., sharedLoginTokenKey
=== capturedKey && sharedTokenPromise === capturedPromise); keep all getToken,
success/failure handling unchanged so only the readiness flip is gated to the
latest request.
---
Nitpick comments:
In `@src/components/common/Layout.tsx`:
- Line 46: Layout component currently renders nothing while waiting for auth
(uses {isAuthReady ? <Outlet /> : null}); replace the null fallback with a
minimal loading UI (e.g., a small spinner, skeleton bar, or an accessible
"Loading..." status element) so the screen isn't blank. Update the render in the
Layout component to show that fallback when isAuthReady is false (you can create
a tiny LoadingFallback component or inline element) and ensure it is accessible
(role/status or aria-busy) and visually lightweight.
ℹ️ Review info
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
src/components/common/Layout.tsxsrc/components/common/Post/LazyImage.tsxsrc/components/common/Post/PostBody.tsxsrc/components/common/Post/PostHeader.tsxsrc/hooks/useSocialLoginToken.tssrc/pages/searchBook/SearchBook.tsxsrc/types/post.ts
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
📝작업 내용
피드 성능 이슈를 점검한 결과, 초기 구간에서 뷰포트 밖 이미지까지 동시에 요청/디코딩되는 비용이 컸습니다.
(React.lazy는 컴포넌트(JS 번들) 지연 로딩 용도이며, 이번 개선은 이미지 리소스 병목 해소가 목적이라 별도로 적용하지 않았습니다.)
따라서, IntersectionObserver 방식을 사용한 이미지 로딩 최적화를 적용하고자 했습니다.
적용 방식
구현 내용
위키
자세한 내용은 위키를 참고해주세요!
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선 사항